☰ menu
Pavel Satrapa

Obrázek na pozadí

Na pozadí prvku se dá umístit i obrázek. Slouží k tomu vlastnost background-image, jejíž hodnotou je adresa (URL) vkládaného obrázku. Zapisuje se v následujícím tvaru:

background-image: url("adresa");

Uvnitř závorek můžete místo dvojitých uvozovek použít i jednoduché (apostrofy), nebo je zcela vynechat. Pokud jako URL použijete jen relativní cestu – například url(pozadi.gif) – chápe se jako relativní vůči URL stylového předpisu souboru, jenž ji používá. Pokud styl vkládáte do stránky z externího souboru, budou lokátory obrázků ve stylu určovány relativně vůči adrese stylu, nikoli vůči adrese stránky.

Poloha

Vlastnost background-position řídí polohu obrázku v rámci plochy dané prvkem. Můžete ji ovládat ve směru vodorovném i svislém. Pro zadávání hodnot máte k dispozici tři alternativy:

klíčová slova

left (doleva), right (doprava), top (nahoru), bottom (dolů) a center (doprostřed). Můžete použít kombinaci, například

background-position: top left;

umístí obrázek do levého horního rohu. Použijete-li jen jedno slovo, ve druhém směru se automaticky doplní center. Takže umístění doprostřed ke spodnímu okraji zajistí

background-position: bottom;
přesná vzdálenost

uvedená v některé z jednotek podporovaných CSS. Udává vzdálenost levého horního rohu obrázku od levého horního rohu plochy pozadí prvku. Jako první se uvádí posunutí ve vodorovném směru. Chcete-li obrázek umístit o 100 pixelů doprava a o 20 pixelů dolů, použijte

background-position: 100px 20px;
procenta

Slovní popis je poněkud krkolomný, ale ve skutečnosti se chovají celkem přirozeně. Předepíšete-li třeba

background-position: 25% 50%;

bude bod obrázku, který je vzdálen o čtvrtinu jeho šířky od levého okraje a o polovinu výšky od horního, umístěn na bod pozadí, jenž je také vzdálen o čtvrtinu šířky pozadí od levého okraje a v polovině jeho výšky.

Důsledkem je, že napíšete-li 0%, znamená to totéž co left či top, 50% je ekvivalentní center a 100% má stejný efekt jako rigth či bottom. Stejně jako u absolutních rozměrů i zde se jako první uvádí vodorovná pozice a jako druhá svislá.

Pokud polohu neuvedete, umístí se obrázek do levého horního rohu.

Opakování

Dalším důležitým aspektem pro obrázek v pozadí je, zda se má či nemá opakovat. Obrázkem můžete „vydlaždičkovat“ celou plochu, nebo jej naopak umístit jen jednou na určité místo. Rozhoduje o tom vlastnost background-repeat s těmito hodnotami:

Opakování lze kombinovat s výše popsaným určením polohy. Použijete-li obě vlastnosti, první exemplář obrázku se umístí do vámi předepsané pozice a od něj pak začne opakování.

Výchozí hodnotou je repeat – neřeknete-li jinak, vyplní se celé pozadí prvku opakovanými výskyty obrázku.

Pokud obrázek – ať už jednotlivý, či některé jeho opakované exempláře – přesáhne plochu prvku, jehož pozadí tvoří, ořízne se a jeho přesahující část nebude zobrazena.

Podívejte se na příklad jednoduchého opakování a příklad opakování v jednom směru.

Spojení s textem či oknem

Poslední zajímavou vlastností pro pozadí je background-attachment. Rozhoduje o tom, zda se obrázek bude posouvat společně s obsahem stránky. Má jen dvě možné hodnoty: scroll znamená, že obrázek je spojen s obsahem stránky a bude-li se obsah v okně prohlížeče posouvat, posune se s ním. Naproti tomu fixed obrázek „přilepí“ k oknu prohlížeče a i při posunech jeho obsahu si zachová svou pozici.

Výchozí hodnotou je scroll, protože je častěji potřeba, aby se obrázek posouval společně s obsahem prvku. Použití fixed vidíte právě na těchto stránkách – má vykukující hlava je realizována touto skupinou vlastností:

background-image:       url("/~satrapa/img/pozadi.gif");
background-color:       #ffe6bf;
background-position:    0% 100%;
background-attachment:  fixed;
background-repeat:      no-repeat;

Zastřešující vlastnost background

Situace, kdy definujete jen jedinou vlastnost pozadí, jsou opravdu vzácné. Ve valné většině případů jich předepisujete hned několik najednou. V takovém případě se vám bude hodit vlastnost background, aneb „vše o pozadí“.

Její hodnotou může být libovolná směs hodnot jednotlivých dílčích vlastností pro pozadí. Jejich hodnoty se od sebe liší, takže klient snadno pozná, co k čemu patří. Vlastnostem, jejichž hodnoty neuvedete, nastaví výchozí hodnotu. Kompaktnější tvar výše uvedené definice by vypadal takto:

background: url("/~satrapa/img/pozadi.gif") #ffe6bf 0% 100% fixed no-repeat;

Ve skutečnosti jej mám ve stylovém předpisu právě v tomto kompaktním tvaru. Snadněji se píše i přenáší po síti.

Na co si dát pozor

Obrázek na pozadí lze použít dvěma základními způsoby. Jednou možností je, že jej vhodným umístěním a mezerami vystrčíte do prostoru, kde nekoliduje s textem. Ukázku jste viděli ve druhém příkladu, kde je levé odsazení stránky nastaveno tak, aby text nekolidoval s červenou zubaticí. Nebo můžete tímto způsobem opatřovat vybrané části textu (třeba odkazy) ikonami. Nezapomínejte ale, že uživatel si může změnit velikost textu, což v těchto případech může způsobit problémy.

Druhou možností je umístit obrázek přímo pod text, jako třeba v prvním příkladu. Mějte na paměti, že každý obrázek na pozadí zhoršuje čitelnost textu psaného přes něj. Otázkou je jedině jak moc nebo málo ji zhorší. Abyste text poškodili co nejméně, je záhodno, aby pozadí neobsahovalo výrazné barvy, ostré hrany ani velké kontrasty. Podívejte se třeba na tuhle hrůzu – hrany a kontrasty rozbijí text natolik, že nenajdete žádnou barvu, aby text byl rozumně čitelný.

Společně s obrázkem vždy definujte i barvu pozadí, která jej doplní či nahradí. Barva bude vidět všude tam, kde není překryta obrázkem – v místech, kde se obrázek neopakuje, nebo kde je průhledný. Barvu pozadí definujte i v případech, kdy vůbec nemá být vidět (opakovaný neprůhledný obrázek). V tom případě použijte barvu, která odpovídá barevnému vyznění obrázku. Může se totiž stát, že uživatel má vypnuté zobrazování obrázků, nebo se jeho přenos s nějakých důvodů nezdaří. V takovém případě by jej barva pozadí měla zastoupit.

zpět: CSS - barva a pozadí