Proprietatea background-size

Proprietatea background-size stabilește dimensiunea imaginii de fundal. Ca valoare a proprietății pot fi utilizate orice unități de măsură, sau cuvintele cheie auto, cover sau contain.

Sintaxă

selector {
	background-size: valoare;
}

Cuvinte cheie

Valoare	Descriere
`auto`	Fundalul va avea dimensiunea naturală, ca dimensiunea reală a imaginii de fundal. Dacă `auto` este specificat doar pentru o singură parte, atunci pe acea parte fundalul va fi scalat astfel încât să păstreze proporțiile nealterate.
`cover`	Scalează imaginea astfel încât să acopere întregul bloc păstrând proporțiile. Imaginea va încerca să încapă întreagă, dar acest lucru nu va reuși întotdeauna, așa că o parte a ei va fi decupată. Blocul va fi întotdeauna acoperit în întregime cu imaginea.
`contain`	Scalează imaginea astfel încât să încapă întreagă în bloc păstrând proporțiile. În acest caz, ea poate ocupa fie toată lățimea, fie toată înălțimea (depinde de proporțiile imaginii și de dimensiunile elementului). În general, blocul va fi acoperit de imagine nu în întregime (dar imaginea va fi întotdeauna vizibilă în întregime, deși într-o variantă redusă).

Valoarea implicită: auto.

Utilizare

Unitățile de măsură și auto pot fi utilizate în diverse combinații, de exemplu, astfel: auto 20px, sau 30% 20px, sau auto 30% și așa mai departe. În acest caz, primul parametru stabilește dimensiunea fondului pe lățime, iar al doilea parametru - dimensiunea fondului pe înălțime. Dacă este specificat un singur parametru - acesta va stabili dimensiunea fondului atât pe lățime, cât și pe înălțime simultan.

Exemplu

Acum imaginea de fundal va avea dimensiunea sa naturală:

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

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

Exemplu

Acum imaginea de fundal va avea dimensiunea 300px pe 400px (în cazul nostru, proporțiile imaginii vor fi alterate):

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

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

Exemplu

Acum imaginea de fundal va avea dimensiunea 400px pe 400px (în cazul nostru, proporțiile imaginii vor fi alterate):

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

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

Exemplu

Acum imaginea de fundal va avea dimensiunea 400px pe orizontală, iar pe verticală dimensiunea sa se va ajusta astfel încât proporțiile să nu fie alterate:

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

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

Exemplu

Acum imaginea de fundal va avea dimensiunea 400px pe verticală, iar pe orizontală dimensiunea sa se va ajusta astfel încât proporțiile să nu fie alterate:

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

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

Exemplu . Valoarea contain

Urmăriți funcționarea valorii contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Exemplu . Valoarea cover

Urmăriți funcționarea valorii cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Exemplu . Îmbunătățim funcționarea cover

Funcționarea valorii cover poate fi îmbunătățită, dacă centrăm imaginea cu ajutorul proprietății background-position (în cazul nostru, în părțile vizibile vor începe să apară capetele cailor, și nu cozile lor):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Vezi și

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