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 - Poloprůhlednost - Problémy překreslování - Jak roztáhnout obrázek přes celou stránku - Dva obrázky na pozadí najednou - Prolínání pozadí a popředí - Tisk pozadí - Závěrem
Tato stránka pojednává o použití pozadí při tvorbě stránek. Jestli hledáte pozadí na plochu, tak hledejte wallpapers v obrázcích.
Pozadí na webu obecně
Pozadí se řekne anglicky background [begraund]. Pod pojmem pozadí se na webových stránkách rozumí obvykle
- barva pozadí,
- obrázek na pozadí,
- nebo většinou oboje najednou.
Š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í:
- pomocí HTML
- pomocí CSS
HTML zápis pozadí je starší, používaný zatím č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í) a v mobilních prohlížečích.
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, *.png 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, ideálně ve stejném adresáři.
Obrázkové pozadí by mělo splňovat některé požadavky:
- malý soubor (datově i rozměrově),
- bez ostrých kontur, na kterých by zanikalo písmo,
- okraje by měly navazovat, pokud se obrázek naskládá vedle sebe.
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
- textury neboli dlaždice, malé obrázky s navazujícím vzorkem (obrázek papíru, textilie, mramoru apod.) -- nejčastější typ
- loga, obvykle větší obrázky s bílými okraji, které mají uprostřed nějaké logo, patřičně zesvětlené a s utlumenými barvami, aby nerušilo
- proužky s velkou šířkou, malou výškou a s ostrými přechody; dokáží vytvořit optické členění stránky na sloupce
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 "bílé na černé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">
| 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 elementů
Nejde obarvit vnitřek radio buttonu (<input type="radio">).
Řešení případných problémů s prohlížeči
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 včetně formulářového prvku
</div>
Další dost spolehlivý tag je ještě <span>, zejména pro řádkové prvky a texty.
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 x nebo svislém y). Všechno se to dělá CSS vlastností background-repeat.
<p style="background-image: url('pozadi.gif'); |
Pozadí se vykreslí jenom jednou a nebude se opakovat |
<p style="background-image: url('pozadi.gif'); |
Pozadí se bude opakovat vodorovně (v ose x) |
<p style="background-image: url('pozadi.gif'); |
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).
Poznámka: dlouho jsem tu měl chybně uvedeny zápisy x-repeat a y-repeat. Omlouvám se, pokud to někomu nefungovalo.
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:
| left top (normální umístění) |
center top | right top |
| left center | center center | right center |
| left bottom | center 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 |
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 (od roku 2012 i toto to plus mínus jde pomocí vlastností background-size, akorát to nefunguje ve stále živém prohlížeči IE 8).
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.
Poloprůhlednost pozadí
Často dostávám dotazy, jak udělat některé části stránek poloprůhledné. Prostě udělat jenom takový opar nebo pavučinku, aby pod ním prosvítalo pozadí jiného objektu. Dá se to udělat dvěma způsoby:
- použít CSS vlastnost opacity, pak se ale zprůhlední i třeba písmo toho elementu
- použít pro barvu barvu pozadí (background-color) poloprůhledný zápis RGBA
- nebo si nakreslit poloprůhledný obrázek na pozadí objektu. Protože poloprůhlednost se dá dosáhnout jenom ve formátu png, což Explorer vykresluje chybně, v praxi se používají rastrové pavučinky. To jsou gify, které mají zhruba polovičku pixelů průhledných, druhou polovičku bílých nebo prostě světlých. Jako pozadí pak vytvářejí dojem poloprůhlednosti.
Problémy překreslování pozadí
Na pomalejších počítačích (frekvence 200 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:
- obrázek pozadí obsahuje střídavě průhledné pixely,
- obrázek je velký přes čtvrt obrazovky
- nebo pokud se nastaví přibité pozadí (fixed).
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.
Jak obrázek roztáhnout přes celou stránku
Někdy chci, aby se mi pozadí roztahovalo a smršťovalo podle toho, jak má uživatel velké okno prohlížeče. Chtěl bych, aby se na šířce prohlížeče zopakovalo právě jednou. Typicky to chci, když mám na pozadí nějaký hezký obrázek, u kterého chci, aby byl vidět celý.
Dříve to byla téměř neřešitelná situace, ale zhruba od roku 2015 se dá velmi dobře použít CSS vlastnost background-size. Tato vlastnost určuje, jak se má obrázek na pozadí roztáhnout nebo smrsknout. Nejzajímavější je hodnota contain.
body {
background-image: url("fotka.jpg");
background-size: contain;
background-repeat: no-repeat;
}
Tento zápis způsobí, že na pozadí stránky bude fotka roztažená tak, aby se do prohlížeče vešla právě jednou. Přitom nebude zdeformovaná, zachová si poměr stran. Protože se nemá opakovat (no-repeat), bude vedle ní volné místo . Bude to dole nebo nahoře, záleží na rozměru fotky a okna prohlížeče. Chcete-li navíc fotku třeba vycentrovat, použijte vlastnost background-position.
Může-li se obrázek zdeformovat (změnit poměr stran), je na vyplnění stránky vhodný zápis
background-size: 100% 100%;
To způsobí, že se obrázek roztáhne na celou šířku i na celou výšku prvku.
Background-size se dá samozřejmě nastavit i jiným prvkům stránky než jenom pro body. Má i další zajímavé hodnoty. Více v popisu background-size.
Dva obrázky na pozadí najednou
Od roku 2017 všechny prohlížeče podporují tak zvaný multiple background. Zadává se tak, že se do vlastnosti background-image vypíše prostě více url s obrázky. Pod prvkem se potom vykreslí pozadí dvě nebo více. Tento zápis sice není zpětně kompatibilní s prohlížečem IE8 a staršími, takže v nich se potom nezobrazí pozadí vůbec žádné, ale to asi už dnes nevadí.
K čemu je to dobré: když chci třeba jedno pozadí opakovat a druhé neopakovat, když jsou pozadí různě poloprůhledná, když je jedno u levého okraje prvku a druhý u pravého okraje a podobně. Tvoří to hezké efekty, když se to udělá dobře.
Prolínání pozadí a popředí
Přibližně od roku 2020 je možné se spolehnout na CSS vlastnost mix-blend-mode. Já sám vlastnost mix-blend-mode nepoužívám, tak si ji někde najděte. Má spoustu možností, jak přesně se mají na textu nebo obrázcích kombinovat barvy popředí (z textu nebo obrázku) s barvou pozadí a pozadí nadřazených prvků. Název mix-blend-mode znamená způsob smíchání prolnutí. Při použití této CSS vlastnosti se ještě hodí znát CSS vlastnost isolation: isolate.
Tisk pozadí
Pozadí se normálně netiskne. V prohlížeči se dá nastavit, že se bude tisknout. Např. v Internet Exploreru je to v Nástroje > Možnosti > Upřesnit > Tisk > Tisknout pozadí. Musí si to ale nastavit sám uživatel! Neexistuje způsob (pokud vím), jak to nastavit prostřednictvím HTML nebo nějakého skriptu.
Pozadí pod průhledným obrázkem se netiskne, ani když je nastaveno, že se pozadí má tisknout.
V moderních prohlížečích existuje (zatím nestandardní) CSS vlastnost color-adjust s hodnotami economy a exact. Economy zařizuje, že se pozadí tisknout nemá, exact způsobí vytištění pozadí.
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 by měl 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.
Reklama
