CSS pozadina : CSS Background

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-color, background-image, background-position, background-repeat, background-attachment.

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+!!!

Boja pozadine: Background Color

Svojstvom background-color postavljamo boju pozadine elementa.

Obrazac koji koristimo je:

Moguće vrijednosti su:

naziv boje (engleski nazivi): npr. green, yellow, blue

heksadecimalna RGB vrijednost: npr. #FFFF00, #00CC00...

RGB kôd boje – npr. rgb(0, 255, 0), rgb(0, 128, 128)

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

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