CSS Pozadine
Kako se određuje pozadina u CSS-u?
U CSS-u se može odrediti pozadina za jedan ili više elementa, ili za cijeli dokument.
Pozadina je najčešće postavljena kao određena boja ili slika.
Dodjeljivanje pozadina određenim elementima omogućuje da stranica ima lijep izgled.
Pozadina u CSS-su se određuje sljedećim parametrima:
background-color
background-image
background-repeat
background-position
background-attachment
Sintaksa:
background-color: #FF0000;
background-color
Pomoću background-color parametra određujemo boju pozadine.
Vrijednost parametra može biti ime boje, HEX, RGB ili HSL vrijednost.
body {
   background-color: Tomato;
}
background-image
Pomoću background-image parametra postavljamo sliku kao pozadinu.
Vrijednost parametra se postavlja tako da prvo stavimo url, a zatim u zagradi pod navdnicima navedemo ime slike, odnosno lokaciju gdje se slika nalazi.
body {
   background-image: url("Basketball.png");
}
background-repeat
Pomoću background-repeat parametra određujemo da li će se ponavljati slika na pozadini.
Vrijednost parametra su sljedeće:
repeat-x ponavlja sliku pozadine u horizontalnom smjeru
repeat-y ponavlja sliku pozadine u vertikalnom smjeru
no-repeat ne ponavlja sliku
Primjer repeat-x
body {
   background-image: url("Basketball.png");
   background-repeat: repeat-x;
}
Primjer repeat-y
body {
   background-image: url("Basketball.png");
   background-repeat: repeat-y;
}
Primjer no-repeat
body {
   background-image: url("Basketball.png");
   background-repeat: no-repeat;
}
background-position
Pomoću background-position parametra određujemo poziciju slike.
U ovom primjeru smo postavili sliku u gornji lijevi ugao, bez ponavljanja.
body {
   background-image: url("Basketball.png");
   background-repeat: no-repeat;
   background-position: top right;
}
background-attachment
Pomoću background-attachment parametra određujemo da slika bude fiksirana.
Fiksirana pozadina će biti uvijek na prozoru stranice, tj. neće se pomjerati kada pomjeramo stranicu prema dolje.
body {
   background-attachment: fixed;
}