Vlastnosť background-image

Vlastnosť background-image nastavuje obrázok pozadia elementu. V predvolenom nastavení obrázok vyplní celý blok svojimi kópiami, avšak toto správanie je možné zmeniť pomocou vlastnosti background-repeat.

Syntax

selektor {
	background-image: url(cesta k obrázku);
}

selektor {
	background-image: none;
}

Hodnoty

Hodnota	Popis
`url`	Cesta k súboru s obrázkom. Názov obrázka môže byť v dvojitých úvodzovkách, jednoduchých úvodzovkách alebo úplne bez úvodzoviek.
`none`	Zruší obrázok pozadia pre element.

Predvolená hodnota: none.

Príklad

Nastavme obrázok pozadia pomocou background-image, zakázaním jeho opakovania pomocou vlastnosti background-repeat:

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

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

Príklad

Bez background-repeat obrázok pozadia vyplní celý blok:

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

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

Príklad

Je možné súčasne nastaviť obrázok pozadia a nastaviť farbu pozadia pomocou background-color. V tomto prípade tam, kde nebude obrázok pozadia - bude farba pozadia:

<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;
}

Pozrite tiež

vlastnosť background,
ktorá predstavuje skrátenú vlastnosť pre pozadie