CSS Advanced

CSS Backgrounds

CSS (Cascading Style Sheets) omogućava web dizajnerima i programerima da definajuu stil i izgled veb stranica, uključujući pozadinske stilove. Pozadine su ključni aspekt vizualnog identiteta veb stranice. U ovom članku, istražićemo različite opcije za definiranje pozadina u CSS-u, uključujući boje, slike, gradiente, i višestruke pozadine.

Pozadinske boje

Najjednostavniji način za definisanje pozadine je korišćenje boje. Ovo se postiže svojstvom background-color:

body {

    background-color: lightblue;

}

CSS podržava različite načine za definisanje boja, uključujući imenovane boje, heksadecimalne vrednosti, RGB, RGBA, HSL i HSLA.

Pozadinske slike

Pozadinske slike se dodaju korišćenjem svojstva background-image. Možete koristiti URL slike za postavljanje pozadine:

body {

    background-image: url('background.jpg');

}

CSS omogućava dodatno prilagođavanje pozadinskih slika putem sledećih svojstava:

• background-repeat: Kontroliše ponavljanje slike (npr. repeat, no-repeat, repeat-x, repeat-y).

body {

    background-image: url('background.jpg');

    background-repeat: no-repeat;

}

• background-position: Određuje poziciju slike (npr. center, top left, 50% 50%).

body {

    background-image: url('background.jpg');

    background-position: center;

}

• background-size: Određuje veličinu slike (npr. cover, contain, 100px 100px).

body {

    background-image: url('background.jpg');

    background-size: cover;

}

• background-attachment: Kontroliše ponašanje slike pri skrolovanju (npr. scroll, fixed, local).

body {

    background-image: url('background.jpg');

    background-attachment: fixed;

}

Gradijenti

CSS omogućava korišćenje gradijenata kao pozadine, što pruža gladak prelaz između boja. Postoje dva glavna tipa gradijenata: linearni i radijalni.

• Linearni gradijent:

body {

    background: linear-gradient(to right, red, yellow);

}

Ovaj primer stvara prelaz iz crvene u žutu boju s leva na desno.

• Radijalni gradijent:

body {

    background: radial-gradient(circle, red, yellow);

}

Ovaj primer stvara kružni gradijent prelaza iz crvene u žutu boju.

Višestruke pozadine

CSS omogućava korišćenje više pozadinskih slika u istom elementu. Ovo se postiže navođenjem više URL-ova ili drugih vrednosti, odvojenih zarezima:

body {

    background-image: url('background1.png'), url('background2.png');

    background-position: center, top right;

    background-repeat: no-repeat, repeat;

}

U ovom primeru, background1.png će biti centriran i neće se ponavljati, dok će se background2.png ponavljati u gornjem desnom uglu.

Zaključak

CSS nudi širok spektar opcija za prilagođavanje pozadina, od jednostavnih boja do složenih višestrukih slika i gradijenata. Razumevanje ovih opcija omogućava dizajnerima da kreiraju vizuelno privlačne i dinamične veb stranice koje odgovaraju potrebama njihovih projekata. Eksperimentisanje sa različitim svojstvima i vrednostima može rezultirati jedinstvenim i privlačnim dizajnom.

CSS svojstvo podrijetla pozadine

Svojstvo CSS background-origin određuje gdje se pozadinska slika nalazi.

Svojstvo ima tri različite vrijednosti:

border-box - pozadinska slika počinje od gornjeg lijevog kuta obruba

padding-box - (zadano) pozadinska slika počinje od gornjeg lijevog kuta ruba padding-a

content-box - pozadinska slika počinje od gornjeg lijevog kuta sadržaja

Sljedeći primjer ilustrira svojstvo background-origin:

#example1 {

  border: 10px solid black;

  padding: 35px;

  background: url(img_flwr.gif);

  background-repeat: no-repeat;

  background-origin: content-box;

} 

Provjerite svoje znanje na sljedećem linku: https://www.w3schools.com/css/exercise.asp?filename=exercise_css3_colors1