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.

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.

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í.

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

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.

 

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.