Svojstvo background-size

Svojstvo background-size postavlja veličinu pozadinske slike. Vrednost svojstva mogu biti bilo koje jedinice za veličine, ili ključne reči auto, cover ili contain.

Sintaksa

selektor {
	background-size: vrednost;
}

Ključne reči

Vrednost	Opis
`auto`	Pozadina će imati prirodnu veličinu, onakvu kakva je stvarna veličina pozadinske slike. Ako je `auto` zadato samo za jednu stranu, onda će se po toj strani pozadina skalirati tako, da zadrži neizobličene proporcije.
`cover`	Skalira sliku tako da ona pokrije ceo blok s očuvanjem proporcija. Slika će pokušati da stane cela, ali to neće uvek biti moguće, pa će neki njen deo biti odsečen. Blok će uvek biti potpuno pokriven slikom.
`contain`	Skalira sliku tako da ona cela stane u blok sa očuvanjem proporcija. Pri tome ona može zauzeti ili celu širinu, ili celu visinu (zavisi od proporcija slike i od veličina elementa). Blok će u opštem slučaju biti pokriven slikom ne potpuno (ali će slika uvek biti vidljiva cela, iako u smanjenoj varijanti).

Podrazumevana vrednost: auto.

Upotreba

Jedinice za veličine i auto mogu biti korišćene u različitim kombinacijama, na primer, ovako: auto 20px, ili 30% 20px, ili auto 30% i tako dalje. U ovom slučaju prvi parametar zadaje veličinu pozadine po širini, a drugi parametar - veličinu pozadine po visini. Ako je naveden jedan parametar - on će zadavati veličinu pozadine i po širini, i po visini istovremeno.

Primer

Sada će pozadinska slika imati svoju prirodnu veličinu:

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

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

Primer

Sada će pozadinska slika biti veličine 300px na 400px (u našem slučaju proporcije slike će biti izobličene):

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

Primer

Sada će pozadinska slika biti veličine 400px na 400px (u našem slučaju proporcije slike će biti izobličene):

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

Primer

Sada će pozadinska slika biti veličine 400px po horizontalnoj osi, a po vertikalnoj njenoj veličini će se prilagoditi tako da proporcije ne budu izobličene:

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

Primer

Sada će pozadinska slika biti veličine 400px po vertikalnoj osi, a po horizontalnoj njenoj veličini će se prilagoditi tako da proporcije ne budu izobličene:

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

Primer . Vrednost contain

Pogledajte rad vrednosti 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;
}

Primer . Vrednost cover

Pogledajte rad vrednosti 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;
}

Primer . Poboljšajmo rad cover-a

Rad vrednosti cover možemo poboljšati, ako centriramo sliku pomoću svojstva background-position (u našem slučaju na vidljive delove će početi da padaju glave konja, a ne njihovi zadnjaci):

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

Pogledajte takođe

svojstvo background,
koje predstavlja skraćenicu za svojstva pozadine