Background-image
CSS vlastnost background-image určuje obrázek na pozadí.
| hodnoty | obrázkové pozadí |
|---|---|
| url("obrazek.*") | obrázek vyplní pozadí prvku |
| none | prvek nemá 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
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| všechny verze | ||
| Mozilla (Firefox, Netscape 6+ atd.) | všechny verze | |
| Opera | všechny verze | |
| Chrome | ano |
Pokud v Mozille nebo v Opeře nastavené obrázkové nevidíte, může to být kombinací slova a čísla u vlastnosti background-position (to je bug).
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í
Reklama
