Background
CSS vlastnost background určuje případně všechny vlastnosti pozadí najednou.
| hodnoty | chování pozadí |
|---|---|
| všechny vlastnosti v tomto pořadí |
Jsou to vlastnosti: Background-color, Background-image (včetně gradientů), Background-position, Background-repeat, Background-attachment a Background-size.
Vlastnost background lze teoreticky použít pro zápis novějších vlastností jako jsou background-size, background-clip a background-origin. (U clip a origin úplně nevím, co se bude dít, protože mají stejné hodnoty, které nelze odlišit.)
Hodnoty se nemusejí zapisovat v žádném pevném pořadí. Vlastnost background se interpretuje takto:
| vyskytne-li se | interpretuje se jako | což je |
|---|---|---|
| url("obrázek") | *-gradient() | background-image | obrázek na pozadí nebo gradient |
| barva | background-color | barva pozadí |
| no-repeat | repeat | background-repeat | opakování pozadí |
| fixed | local | background-attachment; | přibití pozadí |
| border-box | content-box | content-box | první výskyt background-origin, druhý výskyt background-clip | odkud má pozadí začínat, pod čím se má kreslit |
| left | right | center | pixely | procenta | x-ová (vodorovná) hodnota background-position | pozice obrázku |
| top | bottom | nebo druhý výskyt: center | pixely | procenta | y-ová (svislá) hodnota background-position | |
| contain | cover | bezprostředně po background-position za lomítkem odděleným mezerami: pixely | procenta | 2 hodnoty background-size | zmenšení nebo zvětšení obrázku pozadí |
Hodnoty, které se v zápisu background neuvedou, se vyresetují na výchozí hodnotu! V praxi je tedy lepší používat ukecané vlastnosti background-*, nebo na to myslet. Vlastností background jen začínat a později ji doplnit dalšími vlastnostmi background-*.
Při experimentování, co se stane, když uvedu více barev nebo více hodnot pro pozici, to jednak nic nedělalo, ale dost často se zhroutila celá stránka nebo všechna pozadí na stránce.
Více pozadí najednou
Pokud má mít prvek více obrázkových pozadí najednou, napřed se popíšou všechny vlastnosti prvního obrázkového pozadí, oddělí se to celé čárkou a pokračuje se na další obrázkové pozadí. V praxi to doporučuji raději zapisovat ukecaně pomocí jednotlivých vlastností, jak popisuji u background-image.
Podpora
| Prohlížeč | Podpora ve verzích |
|---|---|
| Internet Explorer | všechny verze |
| Firefox | všechny verze |
| Opera | všechny verze |
| Chrome | všechny verze |
Starší prohlížeče se mohou lišit v tom, jestli podporují různé relativně nové detaily, jako například background-size nebo podporu více pozadí najednou.
Příklad ekvivalentního zápisu
body {
background: yellow url("pozadi.jpg") fixed;
}
je totéž jako
body {
background-color: yellow;
background-image:
url("pozadi.jpg");
background-attachment: fixed;
}
s tím jediným rozdílem, že případné jiné vlastnosti, definované dříve jinými pravidly, se vyresetují na výchozí hodnotu (např. background-repeat).
Gradienty
Kromě barvy a obrázku se dá zhruba od roku 2013 bezpečně používat i pozadí s lineárním gradientem. Formálně patří pod background-image, ale dají se zapsat i pomocí vlastnosti background.
.boxik {background: linear-gradient(#ffffaa,#ffaaaa); }
První hodnota v závorce je první barva, ze které bude gradient nahoře vycházet (v tomto případě žluťoučká) a ta druhá je barva, ve které to bude dole končit (růžovoučká).
Existuje spousta dalších nastavení lineárních gradientů (horizontálně, šikmo), popisuji je u gradientů u background-image. Sám to nepoužívám.
Kde a odkud se pozadí vykresluje
- barevné pozadí (background-color) se vykresluje i pod rámečkem. (Přesněji v mezerách tečkovaného rámečku nebo pod průhledným obrázkem rámečku.)
- obrázkové pozadí se vykresluje až pod paddingem, do rámečku nezasahuje.
Takže obrázky na pozadí a barva se vykreslují trochu jinde. S tím je buďto potřeba počítat, nebo to změnit pomocí relativně nových vlastností background-clip a background-origin.
background-clip
zatím (únor 2021) pouze Firefox, jinde pouze s prefixem -webkit-.
Určuje, pod kterou částí okolí se bude vykreslovat pozadí. Běžně se pozadí vykreslovalo pod paddinem a obsahem prvku (content). Hodnoty jsou logické:
background-clip: border-box | padding-box | content-box | initial | inherit;
: vykreslí pozadí pod obsahem a paddingem, ale ne pod rámečkem a marginem
background-origin
Určuje, odkud se začíná počítat pozice pozadí. To má smysl jenom pro obrázkové nebo gradientové pozadí. Hodnoty jsou:
background-origin: padding-box | border-box | content-box | initial | inherit;
Výchozí je padding-box, což je klasika. Pozadí se počítá od levého horního rohu paddingu (vnitřní výplně).
Border-box začíná počítat pozadí od levého horního rohu rámečku (border). Pokud něco takového potřebujete, prostudujte si také vlastnost border-image, která je sice na něco jiného (na obrázkový rámeček), ale asi se hodí víc.
Content-box ignoruje případný padding a začíná počítat pozadí od levého horního rohu obsahu.
Pokud si pozorně všimnete, barevné pozadí se vykresluje i pod rámečkem (v jeho přerušeních, pokud není solid), ale obrázek na pozadí začíná v rohu paddingu.
Nic to nedělá v případě, že má pozadí nastavené background-attachment: fixed.
Test vlastností background-clip a backgroun-origin
Reklama
