CSS (Cascading Style Sheets) omogućuje web dizajnerima i programerima da stiliziraju web stranice, a jedna od ključnih značajki je upravljanje pozadinama (backgrounds). CSS pozadine omogućuju postavljanje boja, slika, gradijenata i uzoraka kao pozadinu elemenata na web stranici, dodajući vizualnu privlačnost i bolju čitljivost sadržaja.
Boja pozadine:
background-color: Postavlja boju pozadine elementa. Može koristiti nazive boja, heksadecimalne vrijednosti, RGB ili HSL.
body {
background-color: #f0f0f0;
}
Slika pozadine:
background-image: Postavlja sliku kao pozadinu elementa. Putanja može biti relativna ili apsolutna.
body {
background-image: url('background.jpg');
}
Ponavljanje pozadine:
background-repeat: Kontrolira ponavljanje slike pozadine. Opcije uključuju repeat, repeat-x, repeat-y, i no-repeat.
body {
background-image: url('pattern.png');
background-repeat: repeat-x;
}
Pozicija pozadine:
background-position: Postavlja početnu poziciju slike pozadine. Može koristiti ključne riječi (npr. top, center, bottom) ili specifične vrijednosti (npr. 50% 50%).
body {
background-image: url('background.jpg');
background-position: center;
}
Veličina pozadine:
background-size: Kontrolira veličinu slike pozadine. Opcije uključuju auto, cover, contain, ili specifične dimenzije.
body {
background-image: url('background.jpg');
background-size: cover;
}
Prilog pozadine:
background-attachment: Određuje hoće li se pozadina pomicati s ostatkom sadržaja (scroll) ili će ostati fiksirana (fixed).
body {
background-image: url('background.jpg');
background-attachment: fixed;
}
Gradijenti:
CSS omogućuje stvaranje gradijenata pomoću linear-gradient i radial-gradient. Oni mogu biti korišteni kao vrijednosti background-image.
body {
background-image: linear-gradient(to right, red, yellow);
}
8.Origin:
CSS svojstvo background-origin određuje područje unutar elementa gdje je postavljena slika pozadine. Ima tri vrijednosti:
border-box: Slika počinje od vanjskog ruba borda.
.element {
background-image: url('background.jpg');
background-origin: border-box;
8.1.
padding-box: Slika počinje od unutarnjeg ruba paddinga (zadana vrijednost).
.element {
background-image: url('background.jpg');
background-origin: padding-box;
}
8.2.
content-box: Slika počinje od ruba sadržaja.
.element {
background-image: url('background.jpg');
background-origin: content-box;
}
background-origin omogućuje preciznu kontrolu pozicije slike pozadine unutar elemenata, prilagođavajući je različitim dijelovima elementa prema potrebi dizajna.
CSS pozadine su ključni alat u web dizajnu, omogućujući stvaranje vizualno privlačnih i dinamičnih stranica. Korištenjem različitih svojstava, dizajneri mogu prilagoditi pozadine prema potrebama projekta, stvarajući jedinstveno korisničko iskustvo.