Egenskaben background-image

Egenskaben background-image angiver et baggrundsbillede for et element. Som standard vil billedet udfylde hele blokken med kopier af sig selv, men dette behavior kan deaktiveres ved hjælp af egenskaben background-repeat.

Syntaks

selektor {
	background-image: url(sti til billedet);
}

selektor {
	background-image: none;
}

Værdier

Værdi	Beskrivelse
`url`	Stien til billedfilen. Billedets navn kan stå i dobbelte anførselstegn, enkelte anførselstegn eller uden anførselstegn overhovedet.
`none`	Deaktiverer baggrundsbilledet for elementet.

Standardværdi: none.

Eksempel

Lad os angive et baggrundsbillede ved hjælp af background-image, og forbyde dens gentagelse ved hjælp af egenskaben background-repeat:

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

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

Eksempel

Uden background-repeat vil baggrundsbilledet udfylde hele blokken:

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

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

Eksempel

Du kan samtidig angive et baggrundsbillede og angive en baggrundsfarve ved hjælp af background-color. I dette tilfælde, hvor der ikke er noget baggrundsbillede, vil baggrundsfarven blive vist:

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

Se også

egenskaben background,
som er en shorthand-egenskab for baggrund