Lastnost background-image

Lastnost background-image določa sliko ozadja elementu. Privzeto bo slika zapolnila celoten blok s svojimi kopijami, vendar je to vedenje mogoče preklicati z lastnostjo background-repeat.

Sintaksa

selektor {
	background-image: url(pot do slike);
}

selektor {
	background-image: none;
}

Vrednosti

Vrednost	Opis
`url`	Pot do datoteke s sliko. Ime slike je lahko v dvojnih narekovajih, enojnih narekovajih ali brez narekovajev.
`none`	Prekliče sliko ozadja za element.

Privzeta vrednost: none.

Primer

Določimo sliko ozadja z background-image, in prepovimo njeno ponavljanje z lastnostjo background-repeat:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Primer

Brez background-repeat bo slika ozadja zapolnila celoten blok:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Primer

Hkrati je mogoče nastaviti sliko ozadja in barvo ozadja z lastnostjo background-color. V tem primeru bo barva ozadja vidna tam, kjer ni slike ozadja:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Glejte tudi

lastnost background,
ki je okrajšava za lastnosti ozadja