Background-image

CSS vlastnost background-image určuje obrázek na pozadí.

Každému prvku html stránky se dá nastavit obrázek na pozadí. Obrázek musí být v externím souboru a zapisuje se jako url. Obrázku na pozadí se dá nastavit, jestli se bude opakovat a kde přesně bude.

Některým tagům v některých prohlížečích a operačních systémech se nedá nastavit obrázek na pozadí. Jde samozřejmě o tag iframe (v žádném prohlížeči), a tagy <select> a <option> v Internet Exploreru.

Každému html prvku se dá nastavit jenom jeden obrázek pozadí. Je to občas omezující. Pokud potřebuji nastavit prvku dva obrázky pozadí, musím tag prvku obalit ještě jedním tagem a každému prvku nastavit jenom jedno pozadí.

Podpora

Příklady

Nejčastěji se obrázek na pozadí používal u celého dokumentu:

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

ale dá se nastavit jakémukoliv prvku, třeba nějakému levému oddílu:

div.levy {background-image: url("pozadi.gif")}

Obrázek na pozadí by měl být vždy jištěn barvou na pozadí, zejména při světlém textu a tmavém pozadí. Dost časté je to u různých grafických menu. Pokud budou v prohlížeči vypnuté obrázky (nebo se nestačí stáhnout), viděl by čtenář světlé písmo na bílém:

#menu {background-image: url("tmavy.gif"); color: yellow}

Není to sice úplně špatně, ale správně se tedy přidává barva, nejlépe taková, aby odpovídala ladění obrázku:

#menu {background-image: url("tmavy.gif"); color: yellow; background-color: navy}

Obrázek na pozadí se dá zapsat i souhrnnou vlastností background. Předchozí příklad stručněji:

#menu {background: navy url("tmavy.gif"); color: yellow;}

Další příklady

Pozice pozadí, tabulka, pseudopozadí pozicováním

Změna vzhledu odkazu pomocí CSS a pozadí

Vizte též

Background-position = umístění obrázku, Background-repeat = opakování obrázku na pozadí, Background-attachment = chování pozadí při skrollování stránky, Padding = vnitřní okraj, pod který se pozadí také vykresluje, URL v CSS

Odkazy

Pozadí -- Vše o pozadí stránky a objektů v HTML a CSS