CSS pozadina : CSS Background

Svojstva CSS pozadine se ne nasljeđuju s roditeljskih elemenata na elemente djecu.

Pozadina: Background

Svojstvom background možemo postaviti više svojstava pozadine elementa istovremeno. Redoslijed navođenja nije obvezujući.

Svojstva koja možemo postaviti su: background-attachment, background-color, background-image, background-position, background-repeat.

Primjer:

background: #ffffff url('putanja_do_slike') top left no-repeat fixed;

Ovaj primjer postavlja slijedeća svojstva i dodjeljuje im vrijednosti:

background-color: #ffffff;
background-image: url('putanja_do_slike');
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;

Web dizajn je za 5+!!!

Privitak pozadine: Background Attachment

Svojstvo background-attachment koristimo kada smo postavili pozadinsku sliku. Pomoću ovog svojstva određujemo hoće li se pozadinska slika pomicati zajedno sa pomicanjem sadržaja stranice ili će pozadinska slika biti zamrznuta.

Obrazac je:

background-attachment: vrijednost;

Moguće vrijednosti su:

  • fixed
  • scroll

Boja pozadine: Background Color

Svojstvom background-color postavljamo boju pozadine elementa.

Obrazac koji koristimo je:

Moguće vrijednosti su:

  • ime boje (engleski nazivi): npr. red, blue, yellow
  • heksadekadska RGB vrijednost: npr. #FF0000, #0000FF...
  • RGB kod boje – npr. rgb(255, 0, 0), rgb(0, 0, 255)
  • transparent

Pozadinska slika : Background Image

Svojstvom background-image postavljamo sliku kao pozadinu elementa.

Obrazac korištenja je:

background-image: vrijednost;

Vrijednosti mogu biti:

  • url('putanja_do_slike')
  • none

Položaj pozadine : Background Position

Svojstvom background-position određujemo položaj koji na kojem će se pozadinska slika pojaviti.

Obrazac je:

background-position: x-vrijednost y-vrijednost;

x-vrijednost može biti:

  • top
  • center
  • bottom
  • x (%) postotak
  • x položaj

y-vrijednost može biti:

  • left
  • center
  • right
  • y (%) postotak
  • y položaj

Ponavljanje pozadine : Background Repeat

Svojstvom background-repeat određujemo mogućnost ponavljanja pozadinske slike po x osi, y osi ili po x i y osi zajedno. Možemo i isključiti ponavljanje slike.

Obrazac je:

background-repeat: vrijednost;

Vrijednosti mogu biti:

  • repeat-x
  • repeat-y
  • repeat
  • no-repeat