Proprietatea background-image

Proprietatea background-image setează imaginea de fundal a unui element. Implicit, imaginea va acoperi întregul bloc cu copii ale sale, totuși, acest comportament poate fi anulat cu ajutorul proprietății background-repeat.

Sintaxă

selector {
	background-image: url(calea către imagine);
}

selector {
	background-image: none;
}

Valori

Valoare	Descriere
`url`	Calea către fișierul cu imaginea. Numele imaginii poate fi în ghilimele duble, ghilimele simple sau fără ghilimele deloc.
`none`	Anulează imaginea de fundal pentru element.

Valoare implicită: none.

Exemplu

Să setăm o imagine de fundal cu background-image, interzicând repetarea ei cu ajutorul proprietății background-repeat:

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

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

Exemplu

Fără background-repeat imaginea de fundal va acoperi întregul bloc:

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

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

Exemplu

Se pot seta simultan atât imaginea de fundal cât și culoarea de fundal cu ajutorul background-color. În acest caz, acolo unde nu va fi imagine de fundal - va apărea culoarea de fundal:

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

Veți și

proprietatea background,
care reprezintă o proprietate scurtă pentru fundal