Testování nastavení velikosti obrázku na pozadí
(zaměřeno na podporu v Edge, Firefox, Opera, Safari a Google Chrome)
-
Nastavení velikosti obrázku na pozadí libovolného objektu (CSS3 vlastnost background-size), funguje všude kromě IE 8.
div
{ background-image: url(obrazek.jpg);
background-size: contain; /* také cover nebo 100% 100%, viz ukázky */
background-repeat: no-repeat;
background-position: center center;
}
Bez nastavení
Hodnota contain (obrázek se přizpůsobí výšce objektu)
Hodnota cover (obrázek se přizpůsobí šířce objektu, ale protože je vyšší než objekt, tak je oříznut)
Hodnoty 100% 100% (obrázek se roztáhne podle velikosti objektu a je tím pádem deformován)