Vlastnost background-image

Vlastnost background-image nastavuje elementu obrázek na pozadí. Ve výchozím nastavení obrázek vyplní celý blok svými kopiemi, toto chování však lze zrušit pomocí vlastnosti background-repeat.

Syntaxe

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

selektor {
	background-image: none;
}

Hodnoty

Hodnota	Popis
`url`	Cesta k souboru s obrázkem. Název obrázku může být v dvojitých uvozovkách, jednoduchých uvozovkách nebo bez uvozovek.
`none`	Zruší obrázek na pozadí pro element.

Výchozí hodnota: none.

Příklad

Nastavíme obrázek na pozadí pomocí background-image a zakážeme jeho opakování pomocí 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;
}

Příklad

Bez background-repeat obrázek na pozadí vyplní celý blok:

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

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

Příklad

Lze současně nastavit obrázek na pozadí a barvu pozadí pomocí background-color. V takovém případě tam, kde nebude obrázek pozadí - bude barva pozadí:

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

Viz také

vlastnost background,
která je zkratkovou vlastností pro pozadí