Background

CSS vlastnost background určuje případně všechny vlastnosti pozadí najednou.

background
hodnoty chování pozadí

barva obrázek pozice opakování přibitost

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

Podpora background
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

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

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.