Pozadí

Pozadí elementu i celé stránky můžeme vytvořit buď prostým určením barvy pozadí nebo použitím obrázku.

Pozadí určené barvou

Pro vytvoření barevného pozadí použijeme CSS vlastnost background-color. Její hodnotou bude požadovaná barva (více o barevných hodnotách viz. barvy)

body {background-color:#aaa}

Obrázek jako pozadí

Pozadí elementu a stránky může být jakýkoliv obrázek. Je však nutné mít na paměti, že je pouhým pozadím a dá se předpokládat, že přes něj bude nějaký text, který musí být čitelný, a to ve všech částech obrázku (černý text na černobílé fotografii prostě čitelný není).

Samotný obrázek určíme vlastností background-image, její hodnotou je cesta k obrázku, zapsaná v závorce za parametrem url.

body {background-image:url(obrazky/pozadi.gif)}

Opakování obrázku

Obrázek na pozadí se může opakovat (např. jako nějaký vzorek) nebo může být umístěn jen jednou. Standardně se obrázek opakuje v obou směrech (x i y) až do zaplnění celé plochy elementu.

Pro určení způsobu opakování se používá vlastnost background-repeat. Pokud chceme, aby se obrázek opakoval jen ve směru x (tj. horizontálně), použijeme hodnotu repeat-x, ve směru y (tj. vertikálně) repeat-y. Pokud nechceme, aby se obrázek opakoval (např. jde-li o logo či jiný grafický počin, který nemá vytvářet vzorek), použijeme hodnotu no-repeat.

body {background-repeat:repeat-y}

Při opakování obrázku je vhodné použít obrázek, který „sám na sebe navazuje”. V opačném případě bychom vytvořili kromě námi zamýšleného vzorku ještě nějaké to čtverečkování navíc. Opakovat bychom také neměli jeden velký obrázek, který neobsahuje vzor, ale třeba jen jeden objekt. Zkrátka a dobře nevypadá nikterak pěkně čtyři a půl krát se opakující papoušek na pozadí stránky :-)

Umístění pozadí (obrázku)

Pokud chceme obrázek umístit jinak, než s výchozí pozicí (tj. levý horní roh elementu), použijeme vlastnost background-position. Umístění určuje horizontální a vertikální hodnota. Hodnoty horizontálního umístění mohou být left (vlevo), center (na střed) a right (vpravo). Hodnoty vertikálního umístění jsou top (nahoru), center (na střed) a bottom (dolů).

h1 {background-position:left center}