Omadus background-size

Omadus background-size määrab taustapildi suuruse. Omaduse väärtusteks on suvalised mõõtühikud, või võtmesõnad auto, cover või contain.

Süntaks

valija {
	background-size: väärtus;
}

Võtmesõnad

Väärtus	Kirjeldus
`auto`	Taustal on loomulik suurus, nagu taustapildi tegelik suurus on. Kui `auto` on määratud ainult ühele poole, siis selle poole pealt skaalatakse taustapilt nii, et säilitada proportsioonid moonutusteta.
`cover`	Skaalab pildi nii, et see kataks kogu ploki proportsioone säilitades. Pilt püüab mahtuda tervenisti, kuid see ei pruugi alati õnnestuda, seega osa pildist võib kaotsi minna. Plokk on alati tervenisti pildiga kaetud.
`contain`	Skaalab pildi nii, et see mahub tervenisti plokki proportsioone säilitades. Sel juhul võib see hõivata kas kogu laiuse või kogu kõrguse (sõltub pildi proportsioonidest ja elemendi mõõtmetest). Üldjuhul ei ole plokk pildiga tervenisti kaetud (kuid pilt on alati näha kogu ulatuses, kuigi vähendatud kujul).

Vaikeväärtus: auto.

Kasutamine

Mõõtühikud ja auto võib kasutada erinevates kombinatsioonides, näiteks nii: auto 20px, või 30% 20px, või auto 30% jne. Sel juhul määrab esimene parameeter tausta laiuse ja teine parameeter - tausta kõrguse. Kui on määratud üks parameeter - siis see määrab tausta suuruse nii laiuses kui ka kõrguses korraga.

Näide

Nüüd on taustapildil oma loomulik suurus:

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

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

Näide

Nüüd on taustapildi suurus 300px korda 400px (meie puhul muutuvad pildi proportsioonid):

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

Näide

Nüüd on taustapildi suurus 400px korda 400px (meie puhul muutuvad pildi proportsioonid):

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

Näide

Nüüd on taustapildi suurus 400px horisontaalselt, ja vertikaalselt kohandub selle suurus nii, et proportsioonid ei moonduks:

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

Näide

Nüüd on taustapildi suurus 400px vertikaalselt, ja horisontaalselt kohandub selle suurus nii, et proportsioonid ei moonduks:

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

Näide . Väärtus contain

Vaadake väärtuse contain tööd:

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

Näide . Väärtus cover

Vaadake väärtuse cover tööd:

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

Näide . Parandame coveri tööd

Väärtuse cover tööd saab parandada, kui tsentreerida pilt omadusega background-position (meie puhul hakkavad nähtavatele osadele langema hoobuste pead, mitte nende tagumikud):

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

Vaata ka

omadus background,
mis on tausta lühendomadus