Eienskap background-size

Die eienskap background-size spesifiseer die grootte van die agtergrondbeeld. Die waarde van die eienskap kan enige eenhede vir groottes wees, of die sleutelwoorde auto, cover of contain.

Sintaksis

selektor {
	background-size: waarde;
}

Sleutelwoorde

Waarde	Beskrywing
`auto`	Die agtergrond sal sy natuurlike grootte hê, soos die werklike grootte van die agtergrondbeeld. As `auto` slegs vir een kant gespesifiseer word, dan sal die agtergrond langs daardie kant skaleer sodat dit nie sy verhoudings vervorm nie.
`cover`	Skaal die beeld sodat dit die hele blok bedek met behoud van verhoudings. Die beeld sal probeer om heeltemal te pas, maar dit sal nie altyd moontlik wees nie, so 'n deel daarvan sal afgesny word. Die blok sal altyd heeltemal deur die beeld bedek wees.
`contain`	Skaal die beeld sodat dit heeltemal in die blok pas met behoud van verhoudings. Dit kan dan óf die hele breedte, óf die hele hoogte beslaan (afhangende van die beeld se verhoudings en die element se groottes). Die blok sal in die algemeen nie heeltemal deur die beeld bedek wees nie (maar die beeld sal altyd heel sigbaar wees, al is dit dan in 'n verkleinde weergawe).

Verstekwaarde: auto.

Gebruik

Eenhede vir groottes en auto kan gebruik word in verskeie kombinasies, byvoorbeeld so: auto 20px, of 30% 20px, of auto 30%, ensovoorts. In hierdie geval spesifiseer die eerste parameter die grootte van die agtergrond in breedte, en die tweede parameter - die grootte van die agtergrond in hoogte. As een parameter gespesifiseer word - dan sal dit die grootte van die agtergrond in breedte sowel as in hoogte gelyktydig spesifiseer.

Voorbeeld

Nou sal die agtergrondbeeld sy natuurlike grootte hê:

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

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

Voorbeeld

Nou sal die agtergrondbeeld grootte 300px by 400px wees (in ons geval sal die beeld se verhoudings vervorm word):

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

Voorbeeld

Nou sal die agtergrondbeeld grootte 400px by 400px wees (in ons geval sal die beeld se verhoudings vervorm word):

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

Voorbeeld

Nou sal die agtergrondbeeld grootte 400px in die horisontale rigting wees, en in die vertikale rigting sal sy grootte aangepas word sodat die verhoudings nie vervorm word nie:

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

Voorbeeld

Nou sal die agtergrondbeeld grootte 400px in die vertikale rigting wees, en in die horisontale rigting sal sy grootte aangepas word sodat die verhoudings nie vervorm word nie:

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

Voorbeeld . Waarde contain

Kyk na die werking van die waarde 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;
}

Voorbeeld . Waarde cover

Kyk na die werking van die waarde 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;
}

Voorbeeld . Verbeter die werking van cover

Die werking van die waarde cover kan verbeter word, as die beeld gesentreer word deur die eienskap background-position te gebruik (in ons geval sal die perdekoppe sigbaar wees, en nie hul agterkante nie):

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

Sien ook

die eienskap background,
wat 'n kortkode-eienskap vir die agtergrond is