Pozadφ -- V╣e o pozadφ strßnky a objekt∙ v HTML a CSS

Mo╛nß jsem tuto strßnku m∞l rozd∞lit do dvou nebo t°φ. No nic, nechßm to tak.

Pozadφ na webu obecn∞

Pozadφ se °ekne anglicky background [begraund]. Pod pojmem pozadφ se na webov²ch strßnkßch rozumφ obvykle

Kv∙li historickΘmu v²voji znaΦkovacφch jazyk∙ existujφ dva zp∙soby, jak nastavit n∞Φemu pozadφ:

HTML zßpis pozadφ je star╣φ, pou╛φvan² Φast∞ji. Umo╛≥uje pouze nastavit pozadφ celΘ strßnky (a prvk∙ tabulky).

CSS (kaskßdovΘ styly) dovolujφ to samΘ, navφc se neomezujφ na pozadφ strßnky, ale dokß╛ou nastavit pozadφ Φemukoliv (oddφl, odstavec, odkaz atd.). Obrßzek se navφc nemusφ opakovat a m∙╛e b²t r∙zn∞ umφst∞n. Jedinou nev²hodou CSS je jeho hor╣φ podpora ve star╣φch prohlφ╛eΦφch (kterΘ se ale u╛ skoro nevyskytujφ).

Nap°ed popφ╣u HTML zßpis, pak se budeme v∞novat CSS. Ale ·pln∞ prvnφ ·kol je mφt obrßzek pozadφ jako soubor.

Obrßzek pozadφ jako soubor

Je t°eba mφt obrßzek ulo╛en² v souboru typu *.jpg nebo *.gif. Nevφte-li, jak to ud∞lat, p°eΦt∞te si p°φpravu obrßzk∙. Hodn∞ prßce si u╣et°φte, pokud soubor ulo╛φte n∞kde poblφ╛ soubor∙ strßnek.

ObΦas jsou k vid∞nφ velkß bohatß pozadφ p°es celou strßnku, co╛ ale nelze doporuΦit, prßv∞ kv∙li poru╣enφ v╣ech t∞chto zßsad.

Z hlediska konstrukce strßnky se dajφ p°φpustnß obrßzkovß pozadφ rozd∞lit na

Obrßzek pozadφ nejde v prohlφ╛eΦi zv∞t╣ovat (roztahovat) jako normßlnφ obrßzky. PoΦφtejte s tφmto omezenφm.

Pozadφ celΘ strßnky v HTML

HTML zßpis se t²kß tagu <body>, proto╛e pozadφ vlastn∞ ovliv≥uje celΘ t∞lo strßnky (angl. body = t∞lo). Nastavenφ pozadφ se d∞lß pomocφ atribut∙ background a bgcolor.

Strßnka s tφmto zßpisem bude mφt na pozadφ vykreslen² obrßzek pozadi.gif. Kdyby se z n∞jakΘho d∙vodu obrßzek nezobrazil (nebo kdyby byl mφsty pr∙hledn²), pozadφ bude ΦernΘ (black). NauΦte se nespolΘhat na obrßzky a v╛dy p°ipi╣te i deklaraci barvy. Barva se v∞t╣inou nastavuje tak, aby odpovφdala t≤novßnφ toho obrßzku.

Aby bylo pφsmo na ΦernΘm nebo tmavΘm pozadφ ΦitelnΘ, dß se textu takΘ nastavit barva:

Tak╛e to bude ΦernΘ na bφlΘm. Mo╛nß vßm p°ijde divnΘ zmi≥ovat se o barv∞ textu, kdy╛ je °eΦ o pozadφ! LeΦ zvykn∞te si v╛dy s barvou pozadφ zadßvat i barvu pop°edφ, je to velmi praktick² zvyk. P°edchßzφ se tφm chybßm.

Dal╣φm nastavenφm se dß zakßzat posouvßnφ obrßzkovΘho pozadφ p°i rolovßnφ strßnky:

Rekapitulace HTML atribut∙ pozadφ
atribut tagu body	v²znam	mo╛nΘ hodnoty
background	obrßzek na pozadφ	URL obrßzkovΘho souboru (v∞t╣inou jmΘno obrßzku)
bgproperties	"p°ibitost" p°i rolovßnφ / rolovßnφ s textem	fixed, scroll
bgcolor	barva pozadφ	barva
text	barva textu	barva

Je╣t∞ jednou zd∙raz≥uji, ╛e tyto atributy je mo╛no pou╛φt pouze v tagu <body>, jinde nemajφ smysl (proto╛e nefungujφ). V tagu <body> se dß takΘ deklarovat barva odkaz∙ a okraje strßnky, ale to se net²kß problematiky pozadφ.

Pozadφ celΘ strßnky v CSS

StejnΘho efektu se dß jin²m zp∙sobem dosßhnout i pomocφ kaskßdov²ch styl∙ (CSS). Proto╛e se technologii CSS v∞nuji v celΘm serißlu, omezφm se zde na v²klad ╣pek∙ a zßpis stylopisu. Stylopis se vklßdß do hlaviΦky strßnky:

ProΦ to d∞lat takhle

CSS nenφ nutno pou╛φvat. Sp∞chßte-li, pus╗te to z hlavy. Ale mß to v∞t╣φ mo╛nosti a kdo se chce zab²vat stavbou strßnek vφce, ten se bez CSS neobejde.

Existujφ je╣t∞ dva mφrn∞ odli╣nΘ zßpisy, jejich╛ teorii rozebφrßm v praktickΘm pou╛itφ CSS. Jeden spoΦφvß v pou╛itφ externφho *.css souboru se stylopisem, co╛ je praktickΘ, proto╛e se tak dß nastavit nebo zm∞nit pozadφ pro mnoho strßnek najednou (neboli pro v╣echny). To je asi hlavnφ d∙vod, proΦ se CSS v∙bec pou╛φvß. Druh² zp∙sob je in-line zßpis atributem style, co╛ mi ale p°ijde ne╣ikovnΘ. P°φklad in-line zßpisu zelenΘho pozadφ strßnky:

CSS pozadφ libovolnΘho prvku

KaskßdovΘ styly umo╛≥ujφ nastavit pozadφ libovolnΘmu prvku, kter² je v HTML zßpisu vyjßd°en n∞jak²m zobraziteln²m tagem. Tak╛e vlastn∞ v╣emu. Nap°φklad se dß nastavit pozadφ odstavce (tag p), odkazu (tag a), oddφlu (tag div) atd.

Nap°φklad pozadφ v╣ech odstavc∙ ve strßnce se dß deklarovat pomocφ stylopisu v hlaviΦce:

Tφm se ale nastavφ pozadφ v╣ech odstavc∙ na strßnce. Je-li pot°eba dßt pozadφ jenom jednomu odstavci, dß se vyu╛φt t°φd, nebo v HTML zßpisu pou╛φt p°φm² styl. P°φkladem p°φmΘho stylu bude nynφ odkaz s obrßzkov²m pozadφm:

<a style="background-image:
URL('pozadi.gif')}" href="n∞kam"

>Text odkazu</a>

Poznßmka: toΦφ se vßm hlava z mnoha r∙zn²ch zp∙sob∙ zßpisu? Nepropadejte panice. NauΦte se klidn∞ jenom jeden zp∙sob. V dal╣φm v²kladu nebudete vφc pot°ebovat.

ProblΘmy prohlφ╛eΦ∙

N∞kterΘ mΘn∞ roz╣φ°enΘ prohlφ╛eΦe neumφ vykreslit pozadφ pod v╣emi elementy sprßvn∞. ZejmΘna Netscape 4: Ignoruje CSS u formulß°∙, chybuje u tabulek. TakΘ ╣patn∞ vymezuje podbarvovanou plochu (nap°. u odstavc∙ nebo jin²ch blok∙ to se dß opravit nastavenφm vlastnosti border s libovolnou hodnotou). Nap°φklad barva pozadφ tabulky se dß v Netscape 4 spolehliv∞ nastavit pouze p°es tag <td> (bu≥ka):

Internet Explorer verze 4 se od verze 5 li╣φ prßv∞ jenom v urΦit²ch chybßch p°i aplikaci pozadφ. Zatφmco IE 5 vykresluje pozadφ pod ka╛d²m elemetem sprßvn∞, IE 4 ignoruje padding (kter² by m∞l takΘ podbarvit). «ßdnΘ zßkonitosti chyb jsem ale neobjevil.

V praxi je tedy v╛dy pot°eba odzkou╣et strßnku na n∞kolika prohlφ╛eΦφch a sledovat p°φpadnΘ problΘmy. Na╣t∞stφ neb²vajφ p°φli╣ ΦastΘ.

ProblΘmy element∙

╪e╣enφ

Chcete-li mφt jistotu, ╛e se pozadφ vykreslφ sprßvn∞ ve v╣ech prohlφ╛eΦφch, pou╛φvejte tag <div> - oddφl. To je co se CSS t²kß nejjist∞j╣φ element. Pozadφ nastavte tomu oddφlu, nejlΘpe vΦetn∞ ╣φ°ky a v²╣ky. Nap°.:

<div style="background-color: red; width: 120px; height:
50px">Obsah oddφlu</div>

Dal╣φ dost spolehliv² tag je je╣t∞ <td> (bu≥ka tabulky) a pro texty <span>.

Opakovßnφ obrßzkov²ch pozadφ

V normßlnφm p°φpad∞ se obrßzkovß pozadφ sklßdajφ vedle sebe a pod sebe, a╛ vyplnφ prostor, kter² vyplnit mohou. To je ve v∞t╣in∞ p°φpad∙ v²hodnΘ.

N∞kdy je to ale ne╛ßdoucφ, proto se dß opakovßnφ vypnout. Nebo dß nastavit opakovßnφ jenom v jednom sm∞ru (vodorovnΘm nebo svislΘm). V╣echno se to d∞lß CSS vlastnostφ background-repeat.

Podpora vlastnosti background-repeat je v prohlφ╛eΦφch p°ekvapiv∞ dobrß.

Nejzajφmav∞j╣φ je asi nastavenφ no-repeat. OpravdovΘho v²znamu toto nastavenφ zφskßvß v kombinaci s umφst∞nφm (background-position).

Umφst∞nφ obrßzkov²ch pozadφ

CSS vlastnost background-position °φdφ umφst∞nφ obrßzkovΘho pozadφ. Pou╛φvß se zejmΘna p°i vypnutΘm opakovßnφ (ale nenφ to podmφnkou). Zadßvajφ se dv∞ hodnoty odd∞lenΘ mezerou. Prvnφ hodnota pro horizontßlnφ umφst∞nφ, druhß pro vertikßlnφ.

NejΦast∞ji pou╛φvanΘ hodnoty jsou umφst∞nφ na strany a na st°ed. P°ehledn∞ znßzorn∞no:

background-position:
left top (normßlnφ umφst∞nφ)	center top	right top
left center	center center	right center
left bottom	centre bottom	right bottom

Mohou se pou╛φt i pixely a procenta. Zßpis Φφslem znamenß poΦet pixel∙ (obrazovkov²ch bod∙), p°iΦem╛ sou°adnice urΦuje polohu levΘho hornφho rohu obrßzku.

Trochu jinak je to u procent. Tam poΦet procent znamenß to, ╛e t°eba bod ve dvaceti procentech ╣φ°ky elementu bude zalφcovßn s dvaceti procenty ╣φ°ky obrßzku.

Netscape 4

Drobnß rekapitulace mo╛nostφ CSS

Na rozdφl od klasickΘho HTML umo╛≥ujφ kaskßdovΘ styly nastavit barevnΘ a obrßzkovΘ pozadφ Φemukoliv, zakßzat rolovßnφ opakovßnφ, a nastavit p°esnou pozici. Ov╣em ani CSS nedovolujφ obrßzek pozadφ n∞jak roztahovat. Navφc prohlφ╛eΦ Netscape 4 neumφ vykreslit pozadφ tabulky a nezvlßdß zm∞nu pozice.

Pozadφ tabulek v HTML

HTML 3.2 obsahovalo je╣t∞ jeden zp∙sob, jak nastavit pozadφ bez pou╛itφ CSS. Jde o pozadφ tabulek a bun∞k tabulky. Barva pozadφ se d∞lß atributem bgcolor, na obrßzkovΘ pozadφ se pou╛φvß html atribut background:

MΘn∞ spolehlivΘ (proto╛e tu╣φm Netscape 3 to nezvlßdß) je nastavit pozadφ jen jednotlivΘ bu≥ce:

Chcete-li nastavit pozadφ tabulky spolehliv∞, aby to fungovalo i v Netscapu, tak toto je jedin² zp∙sob, proto╛e Netscape 4 ignoruje CSS vlastnosti u tabulek.

Pomocφ t∞chto efekt∙ lze velmi spolehliv∞ a p°esn∞ urΦovat obrßzkovΘ pozadφ. Podle mΘho odhadu tuto technologii dnes pou╛φvß kolem 80% profesionßlnφch webdesigner∙ (proto╛e jsou zamilovanφ do tabulek a ned∙v∞°ujφ CSS).

ProblΘmy p°ekreslovßnφ

Na pomalej╣φch poΦφtaΦφch (frekvence 150 MHz a mΘn∞) obΦas dokß╛e obrßzkovΘ pozadφ docela zatopit grafickΘ kart∞ a procesoru. Obzvlß╣╗ se to t²kß rolovßnφ, pokud:

Jeden Φas jsem se toti╛ zamiloval do pr∙hledn²ch pozadφΦek (takovΘ pavuΦinky vyvolßvajφcφ dojem polopr∙hlednosti), ale pak jsem zjistil, ╛e se s tou strßnkou n∞kde v∙bec nedß rolovat a taky se pomaleji vykresluje. Bacha na to.

Pseudopozadφ pozicovßnφm

Dojem podobn² obrßzkovΘmu pozadφ se dß vytvo°it je╣t∞ jednφm zp∙sobem. Op∞t p∙jde o CSS, tentokrßt pou╛iji pozicovßnφ. Nebudu zde vypisovat technologii CSS pozicovßnφ, to jsem ud∞lal jinde. Omezφm se na ideu.

Ve skuteΦnosti to ╛ßdnΘ pozadφ vlastn∞ nenφ. Prost∞ se do strßnky vlo╛φ obrßzek (nebude se opakovat), nastavφ se mu absolutnφ (mo╛nß i relativnφ) poloha, nastavφ se mu zßporn² z-index a nechß se p°es n∞j p°etΘkat text nebo jin² obsah.

Vtip tohoto p°φstupu spoΦφvß v tom, ╛e nynφ m∙╛u obrßzek roztßhnout p°es celou strßnku, pokud mu nastavφm ╣φ°ku (v HTML nebo stylem) 100%. Potom se mi bude m∞nit ╣φ°ka obrßzku, pokud zm∞nφm ╣φ°ku okna. Trochu problΘm b²vß v tom, ╛e se takto obrßzek trochu deformuje, proto╛e se zßrove≥ nem∞nφ v²╣ka. Ale to u╛ se prost∞ musφ o╛elet. TakΘ to nefunguje v historick²ch prohlφ╛eΦφch.

Obrßzku pseudopozadφ se dß nastavit spousta dal╣φch CSS vlastnostφ, obzvlß╣t∞ upozor≥uji na filtry.

Zßv∞rem

Cht∞l bych dodat pßr doporuΦenφ. Vlastn∞ budu opakovat v∞ci ze zaΦßtku tohoto textu, ale p°ijde mi to d∙le╛itΘ. To hlavnφ, co bych cht∞l °φci:

╛ßdnΘ obrßzkovΘ pozadφ = nejlep╣φ pozadφ

Projd∞te si dne╣nφ Internet a °ekn∞te sami: kolik renomovan²ch server∙ pou╛φvß pod textem obrßzek na pozadφ? Prsty jednΘ ruky budou staΦit.

Zjemn∞te linie

Ned∞lejte obrßzkovΘ pozadφ s ostr²mi p°echody pod pφsmem, nedß se to potom Φφst.

NespolΘhejte na obrßzky

Pamatujte, ╛e klient m∙╛e mφt obrßzky vypnutΘ nebo k n∞mu nemusejφ dorazit. Vß╣ web musφ vypadat dob°e i bez toho.

Deklarujte barvu

Pokud mßte inverznφ schΘma, toti╛ sv∞tl² text na tmavΘm obrßzkovΘm pozadφ, tak musφte p°idat deklaraci tmavΘ barvy na pozadφ. Kdyby toti╛ obrßzek pozadφ zatφm nedorazil (nebo kdyby byl vypnut²), tak mßme sv∞tlΘ pφsmo na bφlΘm. P°φjemnΘ poΦtenφ!

Tato chyba se p°ekvapiv∞ Φasto objevuje i na renomovan²ch serverech. Je╣t∞ ╛e sedφm za vytßΦen²m p°ipojenφm modemem 28. Jinak bych si toho asi nev╣imnul.

Pßr odkaz∙

Obsah

Hledßnφ

Zßkladnφ kurs

Editory

HTML tipy

Provoz webu

CSS styly

P╪EHLED VLASTNOST═ CSS

`<p style="background-image: URL ('pozadi.gif'); background-repeat: no-repeat">`	Pozadφ se vykreslφ jenom jednou a nebude se opakovat
`<p style="background-image: URL ('pozadi.gif'); background-repeat: x-repeat">`	Pozadφ se bude opakovat vodorovn∞ (v ose x)
`<p style="background-image: URL ('pozadi.gif'); background-repeat: y-repeat">`	Pozadφ se bude opakovat v ose y, tj. svisle pod sebou.

Pozadφ strßnek