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