Eienskap background-image

Die eienskap background-image stel 'n agtergrondbeeld vir 'n element. Standaard sal die beeld die hele blok met sy kopieë teël, maar hierdie gedrag kan gekanselleer word met die eienskap background-repeat.

Sintaksis

selektor {
	background-image: url(pad na beeld);
}

selektor {
	background-image: none;
}

Waardes

Waarde	Beskrywing
`url`	Pad na die beeldlêer. Die beeld se naam kan in dubbele aanhalings, enkele aanhalings of sonder aanhalings wees.
`none`	Kanselleer die agtergrondbeeld vir die element.

Standaardwaarde: none.

Voorbeeld

Laat ons 'n agtergrondbeeld stel met background-image, en die herhaling daarvan verbied met die eienskap background-repeat:

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

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

Voorbeeld

Sonder background-repeat sal die agtergrondbeeld die hele blok teël:

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

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

Voorbeeld

Jy kan gelyktydig 'n agtergrondbeeld stel en 'n agtergrondkleur stel met background-color. In hierdie geval, waar daar geen agtergrondbeeld is nie, sal die agtergrondkleur sigbaar wees:

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

Sien ook

die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is