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.
Lze použít i s novějšími vlastnostmi background-clip, background-origin a background-size (podpora od IE 9).
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 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.
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í.
Prohlížeč | Podpora ve verzích |
---|---|
Internet Explorer | všechny verze |
Firefox | všechny verze |
Opera | všechny verze |
Chrome | všechny verze |
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).
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.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.