Background-size

CSS vlastnost background-size umožňuje roztažení nebo smrsknutí obrázku na pozadí.

background-size
hodnoty velikost obrázku na pozadí
auto obrázek na pozadí je tak velký, jak skutečně je - výchozí hodnota, jako by nebyla
100% obrázek na pozadí se roztáhne nebo smrskne tak, aby se na šířku do prvku vešel přesně jednou; výška obrázku na pozadí se přizpůsobí tak, aby obrázek zachoval proporce
100% 100% obrázek na pozadí se roztáhne nebo smrskne tak, aby se na šířku i na výšku do prvku vešel  přesně jednou; obrázek bude zdefomovaný
40px obrázek na pozadí se upraví na šířku 40px; výška se přizpůsobí tak, aby se obrázku zachovaly proporce
40px 80px obrázek pozadí se upraví na přesné rozměry: šířka 40px, výška 80px. Bez ohledu na to, jaké měl obrázek původní skutečné rozměry.
auto 80px obrázek pozadí se upraví tak, aby měl výšku 80px. Šířka se upraví automaticky tak, aby měl obrázek původní proporce.
contain obrázek pozadí se roztáhne nebo zmenší tak, aby se celý vešel do prvku. Zpravidla to znamená, že delší rozměr obrázku odpovídá delšímu rozměru prvku. Poměr stran obrázku zůstane zachován (nedeformuje se). Pozadí se tedy zobrazí celé.
cover obrázek pozadí se roztáhne nebo zmenší tak, aby se kratší rozměr vešel do prvku. Poměr stran se zachová. Typicky to vede k tomu, že část pozadí není vidět.

Background-size dává smysl u prvků, kterým je zároveň přiřazeno obrázkové pozadí, typicky vlastností background-image.

Podpora

Všechny moderní prohlížeče background-size umějí, s výjimkou IE 8. Background-size patří do CSS 3 (spolu s background-origin a background-clip).

Podpora background-size
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer od verze IE 9  
Mozilla (Firefox) všechny verze  
Chrome, Safari, Opera všechny verze  

Příklad

V příkladu má hlavička šířku nastavenou na 100 %, takže předem nevíme, jaká ta šířka bude. Kdyby pod hlavičkou bylo normální obrázkové pozadí, tak by se vykreslilo jen pod část, nebo naopak by se tam celé nevešlo. Proto se smrskne nebo roztáhne tak, aby se vešlo. Upraví se přitom tak, aby se zachovaly proporce. Je možné, že se pak obrázek nevejde pod hlavičku celý na výšku, nebo naopak nebude stačit. Aby se nezačal opakovat, je důležité nastavit background-repeat: no-repeat;.

.hlavicka {
    background-image: url("obrazky/pozadi-hlavicky.png");
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
}

Je to užitečné zejména pro mobily, pro které se stránky často dělají na sto procent, přitom ale šířku vlastně neznáme.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.