Właściwość background-image

Właściwość background-image ustawia obraz tła elementu. Domyślnie obraz pokryje cały blok swoimi kopiami, jednak to zachowanie można wyłączyć za pomocą właściwości background-repeat.

Składnia

selektor {
	background-image: url(ścieżka do obrazu);
}

selektor {
	background-image: none;
}

Wartości

Wartość	Opis
`url`	Ścieżka do pliku z obrazem. Nazwa obrazu może być w podwójnych cudzysłowach, pojedynczych i bez cudzysłowów.
`none`	Wyłącza obraz tła dla elementu.

Wartość domyślna: none.

Przykład

Ustawmy obraz tła za pomocą background-image, wyłączając jego powtarzanie za pomocą właściwości background-repeat:

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

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

Przykład

Bez background-repeat obraz tła pokryje cały blok:

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

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

Przykład

Można jednocześnie ustawiać obraz tła i ustawiać kolor tła za pomocą background-color. W tym przypadku tam, gdzie nie będzie obrazu tła - będzie kolor tła:

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

Zobacz też

właściwość background,
która jest skrótem dla właściwości tła