Pozadí stránek

a oddílů, odstavců a tabulek

Pozadí na webu obecně - Obrázek jako soubor - Pozadí celé stránky v HTML - Pozadí celé stránky v CSS - CSS pozadí libovolného prvku - Opakování obrázkových pozadí - Umístění obrázkových pozadí - Pozadí tabulek v HTML - Problémy překreslování - Pseudopozadí pozicováním - Závěrem - Pár odkazů

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 

Širší problematikou je pozadí obrázkové. 

Kvůli historickému vývoji značkovacích jazyků existují dva způsoby, jak nastavit něčemu pozadí

  1. pomocí HTML
  2. pomocí CSS

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. 

Obrázkové pozadí by mělo splňovat některé požadavky: 

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. 

Příklad:

<body background="pozadi.gif" bgcolor="black">

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

<body bgcolor="black" text="white">

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:

<body background="pozadi.gif" bgproperties="fixed">

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: 

<style>

body { 

background-image: URL('pozadi.gif'); /* obrázek na pozadí */

background-attachment: fixed; /* pozadí neroluje */

background-color: black; /* případná barva pozadí černá */

color: white; } /* bílý text */

</style>

Jak je vidět, klíčová slova jsou v CSS poněkud rozdílná než v HTML. 

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: 

<body style="background-color: green">

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: 

<style>

p  {background-image: URL('pozadi.gif')}

</style>

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čů

Ne všechno ale funguje naprosto perfektně. Chybky jsou dvou druhů:

  1. Chyby prohlížečů (Netscape !!!)
  2. Chyby elementů (zejména formulář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 tabulek a formulářů. Také špatně vymezuje podbarvovanou plochu (např. u odstavců, to se dá opravit nastavením vlastnosti border s libovonou hodnotou). Netscape často vytvoří záhadný zmatek a chybu. 

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 elemetnů

V Interet Exploreru 5 a nižších nejde nastavit pozadí tagu <select>.

Všechny formuláře a tabulky jsou ignorovány v Netscape Navigatoru 4. 

Ř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>

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

<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.

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. 

Např. následující zápisy jsou ekvivalentní:

background-position: 50% 0  background-position: center top

Netscape 4

Neumí změnit pozadí z levé horní.

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. 

Tolik zhruba k obrázkovému pozadí pomocí CSS. 

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:

<table background="pozadi.gif"> ...

Méně spolehlivé (protože tuším Netscape 3 to nezvládá) je nastavit pozadí jen jednotlivé buňce: 

<td background="pozadi.gif">Obsah buňky</td>

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).

U pozadí tabulek nelze vypnout opakování nebo nastavit pozici. 

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. 

Pokud nevíte, co je to absolutní poloha nebo z-index, nastudujte si to v popisu CSS pozicování

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.

Ale pod různými lištami, proužky a okraji se to hodí.

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ů

na stažení obrázkových pozadí: 

http://members.aol.com/Yschneller/graphics/bg.html http://netcreations.com/nc-cgi/pat-sel.pl/0
http://graphics.mujweb.cz/czech.htm
http://www.webgate.cz/main/_html/obrazky.php 

Napište mi další, prosím. 

Vizte též: Základy HTML, Příprava obrázku, CSS styly, CSS vlastnosti a hodnoty, formátování tabulek, design pomocí tabulek, CSS pozicování, zápis barev

Odfláknutý příklad: Příklady na pozadí a pseudopozadí

Píše Yuhů
dusan@pc-slany.cz
mail formulářem
Jak psát web O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage Hledání

Obsah

Hlavní stránka

Novinky

FAQ

Download

Zdroje

Hledání


Rozšířené

Základní kurs

Jak udělat stránku

Základy HTML

Publikování

Zásady psaní

Editory

Různé prohlížeče

Editory

FrontPage 2000

FP Editor 98

Word 97

FrontPage Express

HTML tipy

Příprava obrázků

Obrázky

Pozadí

Odkazy

Vychytávky odkazů

Záložky

Aktivní mail

Tabulky

Úprava tabulek

Novinky tabulek

Design tabulkami

Rámy

Formátování rámů

Rámy nepoužívat

Iframe

Formuláře

Formuláře v HTML

Dokonalé formuláře

Zápis barev

Definice

Formátovací chyby

Jak udělat levé menu

Vytěžování stránek

Provoz webu

Rychlost stránek

Vzdálené služby

Vyhledávače

Katalogy

Správa souborů

Ikona stránky

Obsah / forma

Čeština

Chyby češtiny

Tabulky kódování

Meta tagy

Nastavení serveru

Programování stránek

Začátky PHP

Možnosti PHP

Používání prohlížeče

CSS styly

CSS styly

Úvod do CSS

Struktura textu

CSS prakticky

PŘEHLED VLASTNOSTÍ CSS

Složitější deklarace

Délkové jednotky

Pozicování

Sloupce pozicováním

Okraje objektů

Odlišení prohlížečů

Omezení CSS

Odlišný tisk

Dynamické HTML

Filtry

Příklady filtrů

Různé barvy odkazů

Barva rolovací lišty

 


Jak psát web: http://dusan.pc-slany.cz/internet/

Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz

Poslední aktualizace 01.12.2001