Vlastnost background-size

Vlastnost background-size nastavuje velikost obrázku pozadí. Hodnotou vlastnosti jsou jakékoli jednotky pro velikosti, nebo klíčová slova auto, cover nebo contain.

Syntaxe

selektor {
	background-size: hodnota;
}

Klíčová slova

Hodnota	Popis
`auto`	Pozadí bude mít přirozenou velikost, jako je skutečná velikost obrázku pozadí. Pokud je `auto` zadáno pouze pro jednu stranu, pak se podél této strany pozadí škáluje tak, aby zachovalo nezkreslené proporce.
`cover`	Škáluje obrázek tak, aby pokryl celý blok s zachováním proporcí. Obrázek se bude snažit vejít celý, ale ne vždy se to podaří, proto bude nějaká jeho část oříznuta. Blok bude vždy celý pokryt obrázkem.
`contain`	Škáluje obrázek tak, aby se celý vešel do bloku s zachováním proporcí. Přitom může zabrat buď celou šířku, nebo celou výšku (závisí na proporcích obrázku a na rozměrech elementu). Blok obecně nebude pokryt obrázkem celý (na druhou stranu bude obrázek vždy celý vidět, byť ve zmenšené verzi).

Výchozí hodnota: auto.

Použití

Jednotky pro velikosti a auto mohou být použity v různých kombinacích, například takto: auto 20px, nebo 30% 20px, nebo auto 30% a tak dále. V tomto případě první parametr nastavuje velikost pozadí na šířku, a druhý parametr - velikost pozadí na výšku. Pokud je zadán jeden parametr - pak bude nastavovat velikost pozadí jak na šířku, tak na výšku současně.

Příklad

Nyní bude obrázek pozadí mít svou přirozenou velikost:

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

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

Příklad

Nyní bude obrázek pozadí o velikosti 300px krát 400px (v našem případě se proporce obrázku zkreslí):

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

Příklad

Nyní bude obrázek pozadí o velikosti 400px krát 400px (v našem případě se proporce obrázku zkreslí):

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

Příklad

Nyní bude obrázek pozadí o velikosti 400px vodorovně, a svisle se jeho velikost přizpůsobí tak, aby se proporce nezkreslily:

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

Příklad

Nyní bude obrázek pozadí o velikosti 400px svisle, a vodorovně se jeho velikost přizpůsobí tak, aby se proporce nezkreslily:

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

Příklad . Hodnota contain

Podívejte se na funkci hodnoty 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;
}

Příklad . Hodnota cover

Podívejte se na funkci hodnoty 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;
}

Příklad . Vylepšíme funkci cover

Funkci hodnoty cover lze vylepšit, pokud obrázek vycentrujeme pomocí vlastnosti background-position (v našem případě na viditelné části začnou padat hlavy koní, a ne jejich zadky):

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

Viz také

vlastnost background,
představující zkratkovou vlastnost pro pozadí