background-size-ominaisuus

Ominaisuus background-size asettaa taustakuvan koon. Ominaisuuden arvona voi olla mikä tahansa koko-yksiköistä, tai avainsanat auto, cover tai contain.

Syntaksi

valitsija {
	background-size: arvo;
}

Avainsanat

Arvo	Kuvaus
`auto`	Taustalla on luonnollinen koko, kuten taustakuvan todellinen koko on. Jos `auto` on annettu vain toiselle puolelle, tällä puolella tausta skaalautuu niin, että sen mittasuhteet eivät vääristy.
`cover`	Skaalaa kuvan niin, että se peittää koko lohkon säilyttäen mittasuhteet. Kuva yrittää mahtua kokonaan, mutta se ei aina onnistu, joten osa siitä leikataan. Lohko tulee aina olemaan kokonaan kuvan peittämä.
`contain`	Skaalaa kuvan niin, että se mahtuu kokonaan lohkoon säilyttäen mittasuhteet. Tällöin se voi käyttää joko koko leveyden, tai koko korkeuden (riippuen kuvan mittasuhteista ja elementin koosta). Lohko yleensä ei tule olemaan kokonaan kuvan peittämä (mutta kuva tulee aina näkymään kokonaan, vaikka pienennettynä versiona).

Oletusarvo: auto.

Käyttö

Kokoyksiköt ja auto voidaan käyttää erilaisissa yhdistelmissä, esimerkiksi näin: auto 20px, tai 30% 20px, tai auto 30% ja niin edelleen. Tässä tapauksessa ensimmäinen parametri asettaa taustan koon leveyssuunnassa, ja toinen parametri - taustan koon korkeussuunnassa. Jos on määritetty yksi parametri - se asettaa taustan koon sekä leveys-, että korkeussuunnassa samanaikaisesti.

Esimerkki

Nyt taustakuva tulee olemaan luonnollisessa koossaan:

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

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

Esimerkki

Nyt taustakuva tulee olemaan koossa 300px kertaa 400px (meidän tapauksessamme kuvan mittasuhteet vääristyvät):

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

Esimerkki

Nyt taustakuva tulee olemaan koossa 400px kertaa 400px (meidän tapauksessamme kuvan mittasuhteet vääristyvät):

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

Esimerkki

Nyt taustakuva tulee olemaan koossa 400px vaakatasossa, ja pystytasossa sen koko sopeutuu niin, että mittasuhteet eivät vääristy:

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

Esimerkki

Nyt taustakuva tulee olemaan koossa 400px pystytasossa, ja vaakatasossa sen koko sopeutuu niin, että mittasuhteet eivät vääristy:

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

Esimerkki . Contain-arvo

Katso contain-arvon toimintaa:

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

Esimerkki . Cover-arvo

Katso cover-arvon toimintaa:

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

Esimerkki . Parannetaan coverin toimintaa

cover-arvon toimintaa voidaan parantaa, jos keskitetään kuva ominaisuuden background-position avulla (meidän tapauksessamme näkyviin osiin alkavat päätyä hevosten päät, eivät takapuolensa):

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

Katso myös

ominaisuus background,
joka on lyhennysominaisuus taustalle