Kaskádové styly dovedou každému prvky přiřadit nějaké pozadí.

Ještě než se pustíme do konkrétních CSS vlastností, je potřeba si ujasnit, jak přesně pozadí funguje. Obecně každý tag zabírá specifické místo na stránce, má svoje rozměry a také je v zařazený do určité „výšky“. Tedy vnořené tagy jsou výš než tagy nadřazené. Toto všechno ovlivňuje, jakým způsobem se ve výsledku pozadí použije.Například tag body zabírá plochu celé stránky, tedy pokud mu přiřadíte červenou barvu, bude celá stránka červená. Na druhou stranu, všechny ostatní tagy tvořící web jsou vnořené do body a když jim nastavíte barvu pozadí jinou, pochopitelně se zobrazí na ploše daného tagu. Jako výchozí je nastavená průhlednost, tedy se zobrazí pozadí tagu pod.

Barva na pozadí

K zapsání barvy na pozadí slouží vlastnost background-color, která nabývá stejných hodnot jako color.

Obrázek na pozadí

Obrázek na pozadí elementu nastavíme pomocí vlastnosti background-image, hodnota má ale trochu speciální zápis.

Cesta ctí klasická pravidla známá z HTML. Pozor si musíte dát v případě, že zapisujete styly do externího souboru. Relativní cesta se totiž počítá od CSS souboru, nikoliv od HTML stránky. Podporovány jsou klasické webové formáty obrázků, tedy jpg, png a gif. U gif a v případě novějších prohlížečů i u png je podporována průhlednost.Pokud pozadí nastavíte pouze takto jednoduše, jak je uvedeno v předchozím příkladu, bude se použitý obrázek opakovat z levého horního rohu po celé ploše elementu. Tohoto se často využívá pro pozadí celé webové stránky, je ale pak potřeba zvolit vhodný obrázek, který sám na sebe navazuje, aby vytvořil jednolitou plochu. Takovým obrázkům se obvykle říká textura.

Opakování obrázku

Někdy je ale potřeba, aby se textura opakovala pouze v jednom směru, případně vůbec. Od toho tu máme vlastnost background-repeat, která nabývá hodnot repeat-x a repeat-y pro horizontální či vertikální opakování, repeat (výchozí hodnota) a no-repeat vypne opakování zcela. Na místě, kam už obrázek nesahá při omezeném opakování, se použije přednastavená barva či se nechá plocha průhledná.

Pozice obrázku

CSS umí ovlivnit i umístění obrázku v rámci elementu. V případě, že je zapnuté opakování, se na danou pozici umístí první obrázek a od toho se dokreslí zbytek. Samotná vlastnost se nazývá background-position a skládá se ze dvou hodnot, první pro vertikální pozici (top, center, bottom) a druhá pro horizontální (left, center, right).Výchozí hodnota je top left. Pokud potřebujete vyjádřit pozici přesněji, můžete použít procenta pro relativní umístění obrázku či pixely pro absolutní určení pozice.

Při absolutním zadávání hodnot se dají použít i záporná čísla. Tím docílíme skrytí určité části obrázku a i toho se dá využít. Někdy není zcela nutné zadávat obě hodnoty. Třeba u background-position:right jasně vyplyne už z hodnoty, o jaký posun se jedná.

Fixované pozadí

Pokud používáte na pozadí celé stránky (BODY) nějakou texturu, obvykle se scrolluje s celým webem. To se dá vypnout vlastností background-attachment:fixed. Tím se napevno pozadí „připíchne“ k obrazovce a během posunování stránky se nebude měnit. Opakem fixed je scroll, tato hodnota je ale používaná jako výchozí, proto ji není třeba nastavovat.

Souhrnný zápis

Stejně jako font či border se i vlastnosti okolo pozadí dají shrnout do jedné vlastnosti background. Zapisují se v pořadí barva, obrázek, opakování, fixování a pozice. Nicméně každá z hodnot je natolik formátově unikátní, že funguje prakticky libovolné pořadí.

Samozřejmě můžete libovolnou z vlastností vynechat, bude to fungovat také. Obvykle se s obrázkem rovnou nastavuje i barva a to i v situacích, kdy se daná barva vůbec nedostane na povrch. Je to užitečné v případech, kdy máte nastavenou světlou barvu textu, tmavý obrázek na pozadí a načítání obrázku z nějakého důvodu selže.Důsledkem může být zobrazení bílého textu na bílém pozadí a to se opravdu špatně čte.

Poslední věc, kterou byste měli o pozadích vědět, je fakt, že se při normálním nastavení prohlížeče nevytisknou. Proto se pozadí vyplatí používat jen pro designové prvky, kdy nevadí, že se neobjeví i na papíře. Pokud se jedná o obrázek s významnější informační hodnotou, je vhodnější použít klasický tag img.