Pozadina - CSS-trikovi | CSS Almanah 2025

backgroundNekretnina u CSS vam omogućuje kontrolu pozadinu bilo kojeg elementa (što boje ispod sadržaja u tom elementu). To je stenografsko svojstvo, što znači da vam omogućuje da u jedno napišete što bi bilo više CSS svojstava. Kao ovo:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background sastoji se od osam drugih svojstava:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Možete koristiti bilo koju kombinaciju ovih svojstava koja vam se sviđa, u bilo kojem redoslijedu (iako je redoslijed preporučen u specifikaciji gore). Postoji zabluda: sve što ne navedete u backgroundsvojstvu automatski se postavlja na zadane vrijednosti. Pa ako napravite nešto poput ovoga:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Pozadina će biti prozirna, umjesto crvene boje. Ispravak je ipak jednostavan: samo definirajte background-colornakon backgroundili jednostavno upotrijebite skraćenicu (npr. background: url(… ) red;)

Više pozadina

CSS3 je dodao podršku za više pozadina, koje se preklapaju jedna iznad druge. Bilo koje svojstvo povezano s pozadinom može uzeti popis odvojen zarezima, poput ovog:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Svaka vrijednost na popisu odvojenom zarezom odgovara sloju: prva vrijednost je gornji sloj, druga vrijednost je drugi sloj, a boja pozadine uvijek je posljednji sloj.

Recepti

Pogledajte olovku EmBzRd Timothyja Millera (@tjacobdesign) na CodePenu.

Podrška preglednika

Podrška se razlikuje od različitih specifičnih svojstava, a svaki odgovarajući članak u Almanahu sadrži jedinstvene napomene o podršci preglednika. Osnovne jednobojne pozadine i pojedinačne slike rade svugdje, a sve što nije podržano samo se vraća na sljedeću najbolju stvar, bilo da je to slika ili boja.