Īpašība background-size

Īpašība background-size nosaka izmēru fona attēlam. Īpašības vērtības var būt jebkuras izmēru vienības, vai atslēgvārdi auto, cover vai contain.

Sintakse

selektors {
	background-size: vērtība;
}

Atslēgvārdi

Vērtība	Apraksts
`auto`	Fonam būs dabisks izmērs, tāds, kāds ir fona attēla reālais izmērs. Ja `auto` ir norādīts tikai vienai pusei, tad šajā pusē fons tiks mērogots tā, lai saglabātu nesavīdētu malu attiecību.
`cover`	Mērogo attēlu tā, lai tas segtu visu bloku saglabājot malu attiecību. Attēls centīsies ietilpt vesels, bet tas ne vienmēr izdosies, tāpēc kāda tā daļa tiks apgriezta. Bloks vienmēr tiks pilnībā segts ar attēlu.
`contain`	Mērogo attēlu tā, lai tas pilnībā ietilptu blokā saglabājot malu attiecību. Tajā pašā laikā tas var aizņemt vai nu visu platumu, vai visu augstumu (atkarīgs no attēla malu attiecības un no elementa izmēriem). Kopumā bloks netiks pilnībā segts ar attēlu (pie tam attēls vienmēr būs redzams viss, kaut arī samazinātā variācijā).

Noklusējuma vērtība: auto.

Lietošana

Izmēru vienības un auto var tikt izmantotas dažādās kombinācijās, piemēram, šādi: auto 20px, vai 30% 20px, vai auto 30% un tā tālāk. Šajā gadījumā pirmais parametrs nosaka fona izmēru platumā, bet otrais parametrs - fona izmēru augstumā. Ja norādīts viens parametrs - tad tas noteiks fona izmēru gan platumā, gan augstumā vienlaicīgi.

Piemērs

Šobrīd fona attēlam būs savs dabiskais izmērs:

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

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

Piemērs

Šobrīd fona attēls būs izmērā 300px uz 400px (mūsu gadījumā attēla malu attiecība tiks izkropļota):

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

Piemērs

Šobrīd fona attēls būs izmērā 400px uz 400px (mūsu gadījumā attēla malu attiecība tiks izkropļota):

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

Piemērs

Šobrīd fona attēls būs izmērā 400px horizontāli, bet vertikāli tā izmērs pielāgosies tā, lai malu attiecība netiktu izkropļota:

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

Piemērs

Šobrīd fona attēls būs izmērā 400px vertikāli, bet horizontāli tā izmērs pielāgosies tā, lai malu attiecība netiktu izkropļota:

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

Piemērs . Vērtība contain

Apskatiet vērtības contain darbību:

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

Piemērs . Vērtība cover

Apskatiet vērtības cover darbību:

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

Piemērs . Uzlabosim cover darbību

Vērtības cover darbību var uzlabot, ja centrē attēlu ar īpašības background-position palīdzību (mūsu gadījumā uz redzamajām daļām sāks nokļūt zirgu galvas, nevis to aizmugures):

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

Skatiet arī

īpašība background,
kas ir saīsinājuma īpašība fonam