Z lastnostmi za ozadje v CSS določamo barvo ozadja, slike v ozadju, njihovo ponavljanje, položaj, velikost in način premikanja. Pravilna uporaba teh lastnosti vpliva tako na videz kot tudi na berljivost in preglednost spletne strani.

Pomni: Ozadje je del videza elementa, zato mora biti vedno izbrano tako, da ostane vsebina nad njim dovolj pregledna in dobro berljiva.

Sodobni CSS omogoča tudi spreminjanje velikosti slike ozadja z lastnostjo background-size, uporabo več slik v ozadju in uporabo gradientov kot ozadja. Lastnost background-image sprejme eno ali več vrednosti tipa <image>, med katere sodijo tudi gradienti.

Primer več ozadij: background-image: url(slika1.png), url(slika2.png);

background-color

Lastnost background-color določa barvo ozadja poljubnega elementa. Pri izbiri barve pazimo, da ostane vsebina v ospredju dobro berljiva. Privzeta vrednost je transparent.

Pozor: Premajhen kontrast med barvo ozadja in barvo besedila lahko hitro zmanjša berljivost vsebine.

Vrednost	Pomen
`barva`	barva ozadja
`transparent`	prosojno ozadje, privzeta vrednost
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

<h1 class="barva-ozadja-naslova">Glavni naslov</h1>
<p class="odstavek-zelen">To je odstavek, ki ima zeleno ozadje.</p>
<p class="odstavek-prosojen">To je odstavek, ki ima prosojno ozadje.</p>
<p class="odstavek-rdec">To je odstavek, ki ima rdeče ozadje.</p>

body { background-color: #add8e6; }
.barva-ozadja-naslova { background-color: #ffebcd; }
.odstavek-zelen { background-color: #98fb98; }
.odstavek-prosojen { background-color: transparent; }
.odstavek-rdec { background-color: #ffa07a; }

Glavni naslov

To je odstavek, ki ima zeleno ozadje.

To je odstavek, ki ima prosojno ozadje.

To je odstavek, ki ima rdeče ozadje.

background-image

Lastnost background-image določa eno ali več slik v ozadju elementa. Poleg običajnih slik lahko uporabimo tudi gradiente. Če določimo več ozadij, jih ločimo z vejicami. Prvo navedeno ozadje je na vrhu, zadnje pa najbolj zadaj. Samo zadnja plast lahko vsebuje tudi barvo ozadja.

Poleg slike lahko elementu določimo tudi barvo ozadja. To je koristno, če se slika ne naloži ali če vsebuje prosojne dele.

Sodobni brskalniki podpirajo različne slikovne formate za ozadje. Med pogostimi spletnimi formati so AVIF, WebP, PNG, JPEG/JPG, GIF in SVG. Med sodobnimi in pogosto učinkovitimi formati za spletne slike posebej izstopata WebP in AVIF. Več o posameznih formatih je na strani MDN: Image file type and format guide.

Pomni: Pri ozadju s sliko je smiselno določiti tudi barvo ozadja, saj se bo ta prikazala, če se slika ne naloži ali če ima slika prosojne dele.

Vrednost	Pomen
`url`	naslov datoteke, ki vsebuje sliko
`none`	v ozadju ni slike
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

body { background-image: url("bg-demo.webp"); }

background-attachment

Lastnost background-attachment določa, ali se bo slika ozadja premikala skupaj z vsebino ali bo mirovala. Vrednost scroll pomeni, da se ozadje premika skupaj z blokom elementa, fixed pa, da ostane ozadje fiksirano glede na vidno območje. Vrednost local je uporabna pri elementih z lastnim drsenjem.

Vrednost	Pomen
`scroll`	slika ozadja se premika skupaj z elementom, privzeta vrednost
`fixed`	slika ozadja se ne premika glede na vidno območje
`local`	slika ozadja se premika skupaj z vsebino elementa
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

Pozor: Učinek vrednosti fixed je lahko na nekaterih mobilnih napravah drugačen kot na namiznih računalnikih, zato je takšno ozadje dobro preizkusiti v praksi.

background-repeat

Če za ozadje elementa izberemo sliko, lahko z lastnostjo background-repeat določimo, kako se bo slika ponavljala. Privzeto se slika ponavlja vodoravno in navpično.

Vrednost	Pomen
`repeat`	slika se ponavlja vodoravno in navpično, privzeta vrednost
`repeat-x`	slika se ponavlja samo vodoravno
`repeat-y`	slika se ponavlja samo navpično
`no-repeat`	slika v ozadju je prikazana samo enkrat
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

body { 
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
}

body { 
   background-image: url("ozadje.png");
   background-repeat: repeat-x;
}

body { 
   background-image: url("ozadje.png");
   background-repeat: repeat-y;
}

background-position

Če za ozadje elementa izberemo sliko, lahko z lastnostjo background-position določimo njen položaj znotraj elementa. Običajno navedemo dve vrednosti: prva določa vodoravni položaj slike, druga pa navpični položaj slike. Položaj je določen glede na območje, ki ga določa lastnost background-origin.

prva vrednost določa vodoravni položaj slike,
druga vrednost določa navpični položaj slike.

Vrednost lahko navedemo z besedo, v odstotkih ali z dolžino. Če navedemo samo eno vrednost, je druga običajno center oziroma 50%.

Vrednost	Pomen
`left top left center left bottom right top right center right bottom center top center center center bottom`	vodoravni in navpični položaj slike; če navedemo samo eno vrednost, je druga običajno center
`x% y%`	prva vrednost je vodoravni položaj, druga pa navpični položaj slike (0% 0% je enako left top, 100% 100% pa right bottom)
`dolžina x y`	x določa odmik levega roba slike od levega roba elementa, y pa odmik zgornjega roba slike od zgornjega roba elementa
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

body { 
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
   background-position: right top;
}

body { 
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
   background-position: right center;
}

body { 
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
   background-position: 50% 50%;
}

background-size

Lastnost background-size določa velikost slike v ozadju. Sliko lahko pustimo v naravni velikosti, jo raztegnemo ali prilagodimo prostoru elementa. Vrednosti cover in contain sta pri tem posebej uporabni. Pri cover slika prekrije celotno ozadje, del slike pa je lahko odrezan. Pri contain se slika v celoti prikaže znotraj elementa brez rezanja.

Vrednost	Pomen
`auto`	naravna velikost slike, privzeta vrednost
`širina višina`	velikost slike določimo z dolžino ali odstotki
`cover`	slika prekrije celotno ozadje, del slike je lahko odrezan
`contain`	slika se v celoti prikaže znotraj ozadja, brez rezanja
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

Pomni: Vrednost cover je uporabna, kadar želimo, da ozadje prekrije celoten prostor, vrednost contain pa takrat, ko želimo prikazati celotno sliko brez rezanja.

body {
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
   background-size: cover;
}

body {
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
   background-size: contain;
}

background

Lastnost background uporabljamo kot bližnjico za nastavitev več lastnosti ozadja hkrati, med drugim background-color, background-image, background-attachment, background-repeat, background-position in background-size. Če želimo v bližnjici navesti tudi background-size, ga zapišemo za background-position in ga ločimo z znakom /.

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

body {
   background: #f5f5f5 url("ozadje.png") no-repeat right top / cover;
}

Priporočila

Pri ozadju vedno preveri, ali je besedilo nad njim dovolj berljivo.
Pri slikah v ozadju določi tudi barvo ozadja kot rezervno možnost.
Za sodobne spletne slike pogosto uporabi učinkovite formate, kot sta WebP ali AVIF, kadar je to primerno.
Pri večjih ozadjih preveri, ali je primernejša vrednost cover ali contain.

Pogoste napake

Ozadje je izbrano tako, da zmanjša kontrast in oteži branje vsebine.
Slika v ozadju nima določene rezervne barve ozadja.
Napačno je izbran način ponavljanja ali položaj slike.
Bližnjica background je zapisana brez pravilnega vrstnega reda vrednosti.

Nazaj

Naprej