Ominaisuus background-image

Ominaisuus background-image asettaa elementille taustakuvan. Oletusarvoisesti kuva peittää koko lohkon kopioillaan, mutta tätä toimintaa voidaan poistaa käyttämällä ominaisuutta background-repeat.

Syntaksi

valitsija {
	background-image: url(kuvan polku);
}

valitsija {
	background-image: none;
}

Arvot

Arvo	Kuvaus
`url`	Polku kuvatiedostoon. Kuvan nimi voi olla lainausmerkeissä, heittomerkeissä tai ilman lainausmerkkejä.
`none`	Poistaa elementin taustakuvan.

Oletusarvo: none.

Esimerkki

Asetetaan taustakuva käyttäen background-image:ta, estäen sen toistuminen ominaisuudella background-repeat:

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

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

Esimerkki

Ilman background-repeat:ia taustakuva peittää koko lohkon:

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

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

Esimerkki

Voidaan samanaikaisesti asettaa taustakuva ja taustaväri käyttäen background-color:ia. Tässä tapauksessa alueilla, joilla ei ole taustakuvaa, näkyy taustaväri:

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

Katso myös

ominaisuus background,
joka on taustaan liittyvä lyhennysominaisuus