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á myslím smysl jen u prvků, kterým je zároveň přiřazeno obrázkové pozadí, typicky vlastností background-image. Typicky se používá u pozadí, která se neopakují (mají nastaveno background-repeat: no-repeat).

Hodnoty contain a cover odpovídají tomu, jak fungují contain a cover u vlastnosti object-fit - tam jde o rozměry obrázku.

Chcete-li měnit rozměry opakovaných obrázků na pozadí, může být užitečná vlastnost background-repeat s hodnotou round.

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 - background-clip řeší jenom to, pod kterými částmi prvku se bude pozadí zobrazovat, jestli i pod rámečkem a paddingem).

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 skutečnou šířku mobilu v pixelech vlastně neznám.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
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.