Pokud máte na pozadí nějakého prvku obrázek, možná budete potřebovat nastavit jeho velikost. To hlavně v případě, že děláte responzivní layout, který se zvětšuje podle rozlišení zařízení.
Poznámka: Níže uvedené vlastnosti background-* fungují jen v prohlížečích IE9+, Firefox 6+, Chrome 11+, Safari 5+, Android 4+ a iOS 7.1+.
Velikost nastavíte např. takhle:
.big-background { background-size: 50%; }
Pokud chcete, aby obrázek na pozadí (např. ikonka v menu) přesně zapadnul do řádku, bude se hodit např. tento styl:
ul.menu li img.icon {
background-size: 1EM;
}
/* Jednotka EM odpovídá poměru
vůči hodnotě font-size */
Obrázek ale nemusíte zvětšovat jen lineárně, ale můžete použít dvě velikosti k roztažení obrázku jen v jednom směru:
.background {
background-image: url('bg_1x100px.jpg');
background-repeat: repeat-x;
background-size: 1px 1EM;
}
Předchozí styl zvětší obrázek na výšku řádky, ale přitom ponechá jeho šířku na 1px, aby se zbytečně neroztahoval v rozměru, kde to za něj udělá opakování.
Více pozadí najednou
Možná jste již potřebovali dát nějakému prvku více pozadí. Snadno se to řeší pomocí vnořených HTML prvků:
<div class="error-outer">
<div class="error-inner">
...
</div>
</div>
.error-outer {
background: red url('bg_error.jpg')
repeat-x 0 0 / 100% 1px;
}
.error-inner {
background: transparent url('error.png')
no-repeat left center / 1EM 1EM;
}
Jelikož ale vzhled by mělo určovat CSS a neměl by se promítat do HTML struktury, umožňují novější prohlížeče definovat více obrázků na pozadí pro jeden prvek tak, že jednotlivé hodnoty oddělíte čárkou ve vlastnosti background-image (a souvisejících):
.error {
background: red;
background-image:
url(error.png),
url(bg_error.jpg);
background-repeat: no-repeat, repeat-x;
background-position: left center, 0 0;
background-size: 1EM 1EM, 100% 1px;
}
Kromě obrázku (definovaných přes url()) můžete použít i funkce pro gradient (např. linear-gradient(red, green)) nebo hodnotu none, která určuje, že v daném místě není pozadí (to se hodí v případě kaskádování stylů, kdy potřebujete smazat jedno z pozadí). U přechodů nezapomeňte, že je většinou potřeba uvést ještě alternativní zápis s prefixem -webkit-! Více naleznete níže v kapitole Zhuštěný formát.
Vícenásobná pozadí se dají také použít k bezpečnému použití SVG obrázků pro pozadí nebo sprity.
Samozřejmě je potřeba pamatovat na to, že starší prohlížeče budou definici pozadí ignorovat, když v ní najdou čárku, kterou neznají. Proto musíte vždy uvést nejprve jedno pozadí, které následně přepíšete vícenásobným:
.error {
/* pro staré prohlížeče */
background: red url(bg_error.jpg)
repeat-x 0 0 / 100% 1px;
/* vícenásobné pozadí */
background-image:
url(error.png),
url(bg_error.jpg);
background-repeat: no-repeat, repeat-x;
background-position: left center, 0 0;
background-size: 1EM 1EM, 100% 1px;
}
Oříznutí pozadí
Se základními vlastnostmi background-position a background-size souvisí další dvě, které můžete použít k upřesnění, k čemu se tyto dvě hlavní vztahují.
.background {
background-image: url('bg_1x100px.jpg');
background-repeat: repeat-x;
background-size: 1px 1EM;
background-origin: content-box;
background-clip: padding-box;
}
Tímto zápisem říkáme, že pozice a opakování pozadí se vztahuje k obsahu prvku (bez paddingu a okraje) a pozadí se má zobrazovat pod obsahem a paddingem. Výchozí hodnota background-origin je padding-box a výchozí pro background-clip je border-box, což znamená, že pozadí začíná u okraje (border) a zobrazuje se i pod ním.
Pokud chcete zobrazit jeden obrázek pod obsahem a jiný pod okrajem, můžete k tomu použít vlastnost border-image. Pokud navíc clip nastavíte na content-box a nadefinujete nějaký padding, vznikne mezi obrázkem pozadí a okrajem průhledná mezera, kterou můžete využit k zajímavým grafickým efektům.
Přesné umístění pozadí
Polohu pozadí můžete určit pomocí jednotek (px, em, apod.), procent (%) nebo klíčových slov left, top, right, bottom a center.
Ve výchozím stavu se hodnoty v jednotkách a procentech počítají od levého horního okraje (vhledem k background-origin), ale co když potřebujete přesně umístit pozadí od pravého nebo dolního okraje?
V tom případě můžete zkombinovat klíčové slovo určující okraj a za něj přidat hodnotu s jednotkami nebo procenty:
.icon {
background-image: url('icon.png');
background-repeat: no-repeat;
background-size: 1EM 1EM;
background-clip: content-box;
background-position:
bottom 1EM right 2EM;
}
Takto umístíte ikonu do pravého dolního rohu obsahu, ale tak, aby nebyla těsně u okraje. Pokud pak bude dané PNG částečně průhledné, bude ikona zobrazena jako zajímavý vodoznak.
Zhuštěný formát
Prohlížeče podporují zhuštěný formát background:
{
background: url('image')
no-repeat scroll
0 0 / 1EM transparent
} /* údaj za lomítkem je background-size */
Tento formát ale nedoporučuji používat, protože některé prohlížeče (např. Chrome 11-21, Android 4.0 – 4.3 a Safari 5 – 6.x) ho nepodporují. Odděleným použitím background-size zajistíte maximální kompatibilitu.
I když vás výše uvedené prohlížeče nezajímají, mohou mít některé novější problém s tím, že nechápou správně výchozí hodnoty v zhuštěném zápisu a zápis „/1em transparent“ pochopí jako „šířka pozadí je 1em a výška pozadí je transparent„, což není validní zápis a tak ho ignorují.
Pokud chcete použít zhuštěný zápis pro velikost pozadí, uveďte obě hodnoty pro velikost pozadí nebo uveďte barvu na začátku místo na konci (což je také validní):
{ background: url('image')
no-repeat scroll
0 0 / 1EM auto
transparent }
/* background-size s default hodnotou */
{ background: transparent url('image')
no-repeat scroll 0 0 / 1EM }
/* barva na začátku definice */
Pro vlastnosti clip a origin můžete také použít zhuštěný zápis, ale není možné mezi nimi rozlišit, takže obě vlastnosti musí mít stejnou hodnotu. Provedete to jednoduše tak, že uvedete zvolenou hodnotu do seznamu hodnot:
{ background: transparent url('icon.png')
no-repeat content-box scroll
0 0 / 1EM 1EM }
Ve zhuštěném formátu můžete uvést i více pozadí, ale nelze jen uvést třeba jména barev:
{ background: red, blue, green; }
/* jaká barva bude vidět? Aby prohlížeč
tohle nemusel řešit, styl zahodí */
Naopak, aby zhuštěný zápis platil, musí obsahovat každá z hodnot nějakou definici, která je platná pro background-image (který je základem vícenásobného pozadí) a naopak nesmí obsahovat barvu:
{ background:
url(icon.png') right bottom,
url('bg.jpg') content-box,
linear-gradient(red, blue); }
Pravidla se berou ve zdánlivě opačném pořadí, kdy první pravidlo bude mít nejvyšší z-index a bude tedy překrývat všechny následující definice.
Poslední definice, která určuje nejnižší vrstvu jako jediná smí obsahovat definici barvy, přičemž ale stále musí obsahovat alespoň none hodnotu z background-image:
{ background:
url(icon.png') right bottom,
url('bg.jpg') content-box,
red none; }
Pokud chcete zobrazit více barev na pozadí i přes fakt, že barvu můžete mít jen nejnižší vrstva, můžete k tomu použít trik s přechodem:
{ background:
linear-gradient(green,green) content-box,
linear-gradient(blue, blue) padding-box,
red none border-box;
padding: 1em;
border: 0.5em dashed yellow;
}
Tahle definice vytvoří prvek, který bude mít zelený obsah, kolem něj modrý rámeček o šířce 1EM a kolem něj žluto-červený okraj o šířce 0.5em.
Chyba ve Firefoxu
Když budete používat velikost pozadí, dejte si pozor na to, že ve (starých verzích) Firefoxu je chyba při vykreslování zvětšeného opakujícího se obrázku na pozadí. Např.:
.toolbar {
background-image: url('bg_1x10.png');
background-repeat: repeat-x;
background-size: contain;
height: 100px;
}
Z kódu je vidět, že načítáme obrázek vysoký 10 pixelů a pomocí background-size:contain ho necháme zvětšit na celou výšku, což je 100px.
Zde se právě projeví chyba vykreslovacího jádra, které pak začne trvale vytěžovat procesor i grafickou kartu na 100% (resp. 50%, 25%, atd. pokud máte více jader). Jádro se snaží stále přepočítávat obrázek – někdy je vidět, jak takový obrázek problikává, poskakuje nebo se rozmazává.
Jednoduchá oprava neexistuje, jen jedna zásada: Nepoužívejte background-size ke zvětšování obrázků, ale jen ke zmenšování. A to vždy jen tak, jak je potřeba.
Nejlepší je mít obrázky v různých velikostech (např. 16px, 32px, 64px, 128px, atd.), vždy stáhnout ten ‚o trochu větší‘ (pomocí JavaScriptu nebo responzivního CSS) a pomocí background-size ho jen doupravit, aby přesně zapadnul.
UPDATE: v nejnověších verzích Firefoxu by již tato chyba měla být odstraněna. Pokud si ale chcete být jisti, že nebudete zbytečně zatěžovat procesor uživatele zbytečným zvětšováním obrázků, použijte následující trik:
.toolbar {
background-image: url('bg_1x10.png');
background-repeat: repeat-x;
background-size: contain;
background-size: 1px 100%;
height: 100px;
}
Styl zajistí, že prohlížeč nebude zbytečně zvětšovat obrázek ve směru, ve kterém ho stejně opakuje a jen ho v druhém rozměru přizpůsobí na výšku řádky. V tomto případě se obrázek změní z 1x10px na 1x100px. V případě použití contain by se zbytečně zvětšoval na rozměr 10x100px, což není potřeba.
Chyba ve Webkitu
Pokud chcete pozadí zvětšit podle výšky, stačí zadat pouze první rozměr a druhý bude automaticky nahrazen za auto:
/* Definice */
.toolbar { background-size: 1EM; }
/* Prohlížeč použije: */
.toolbar { background-size: 1EM auto;
Pokud ale chcete přizpůsobit obrázek podle jeho šířky, nabízí se styl:
.toolbar { background-size: auto 1EM; }
Tento styl také ve Firefoxu a IE funguje, ale ve webkitu způsobí, že se pozadí vůbec nezobrazí.
Problém je v hodnotě auto, kterou Webkit nechce chápat. Oprava tedy je místo auto zadat nějaký konkrétní rozměr.
/* čtvercová ikonka */
.toolbar { background-size: 1EM 1EM; }
/* opakované pozadí */
.toolbar { background-size: 1px 1EM; }
Pokud ale nechcete rozměr zadávat, protože obrázek má nějaký nekonkrétní rozměr, můžete konkrétní rozměr zadat jen pro webkit:
.toolbar {
/* obrázek 4:3 */
background-size: auto 1EM;
-webkit-background-size: 0.75EM 1EM;
}