Background – css vlastnost pro pozadí

Background je vlastnost, která určuje barvu – nebo obrázek – na pozadí elementu (třeba DIVu). Je to poměrně často používaná vlastnost v CSS, která toho umí víc, než si řada lidí myslí.

Způsob zápisu

Ukázka zápisu pozadí s červenou barvou:

selektor {
   background: #ff0000;
}

Vysvětlení způsobu zápisu

Na místo slova selektor pochopitelně zvolíte správný selektor. Mezi složenými závorkami je napsána vlastnost a za dvojtečkou jsou hodnoty. V tomto příkladu je jen jedna hodnota, a to barva. Zapsána je hexadecimálně. To je celkem běžné, protože takto může být barva navržena grafikem třeba ve Photoshopu. Kodér si ji ve Photoshopu přečte právě v hexadecimální hodnotě. 

Hodnoty používané u BACKGROUND

1. #FF0000 – hexadecimálním zápisem

   Jedná se o zápis v šestnáctkové soustavě, který v CSS poznáte tím, že začíná mřížkou # a pokračuje obvykle šesti znaky. Vždy dva znaky znamenají jednu ze tří barev, tedy červená (red), zelená (gren), modrá (blue). Zápis červené barvy tedy vypadá takto #FF0000. Značky FF v hexadecimální soustavě znamenají hodnostu 255 v desítkové soustavě na kterou jsme zvyklí. Hodnota FF (respektive 255) je maximální hodnota, tedy zápis #FF0000, znamená, že červená je plná a ostatní barvy použity nebudou vůbec.
   Kdy se tento způsob používá
   Velice často, protože jej používají grafické programy a lze tak barvu přenést přesně. Je podporován všemi dnes používanými internetovými prohlížeči.

2. rgba(255, 0, 0, 0.5) – GRBa zápisem

   V principu totéž, co hexadecimální způsob, tedy opět tři barvy (červená, zelená, modrá), jen číselné hodnoty se píší v desítkové soustavě. Hodnota 0 je žádná přítomnost, hodnota 255 je plná přítomnost barvy. Tento zápis je sice o trošku složitější, ale má jednu značnou výhodu. Můžete poslední hodnotou v zápisu uvést průhlednost (ale nemusíte). Průhlednost se uvádí od 0 do 1. Tedy 0.5 je poloviční průhlednost. Pozor! Používejte desetinou tečku, nikoli čárku jak je v Česku zvykem.

3. red – názvem barvy

   Je možné použít i přesně definovaný název barvy, jako např. black, white, gray, silver, yellou, blue, red, green, purple, teal...

 Pozadí s obrázkem

Background dokáže zobrazit i obrázek na pozadí. Zápis už je trošku složitější:

selektor {
   background: url(../adresar/jmeno-obrazku.png) left top no-repeat;
}

Vysvětlení způsobu zápisu

Začátek platí stejně, jako výše. U hodnot je to jiné.

Část „url(../adresar/jmeno-obrazku.png)“ zadává cestu k obrázku. Tato konkrétní cesta je tzv. relativní. To znamená, že není úplně celá, tj. nezačíná http://www.domena.cz.

Slova „top“ a „left“ definují umístění obrázku v případě, že bude element (třeba DIV) buď větší, nebo naopak menší než zvolený obrázek. Pokud by v tomto případě byl DIV větší na šířku i výšku, tak by se obrázek umístil do levého horního rohu. Pochopitelně můžete používat i slova „right“ a „bottom“. Kromě těchto vyhrazených slov se dá provést také zápis v číselné hodnotě. První číslo udává zleva a druhé ze shora. Mohlo by to tedy vypadat i takto:

selektor {
   background: url(../adresar/jmeno-obrazku.png) 150px 20% no-repeat;
}

Slovo „no-repeat“ znamená, že se obrázek nemá opakovat. Pokud byste to neuvedli, tak většina internetových prohlížečů obrázek zopakuje v případě, pokud je element větší než obrázek určený na pozadí. Někdy budete potřebovat obrázek sice zopakovat, ale jen po jedné ose. V takovém případě můžete napsat „repeat-x“, případně „repeat-y“ podle toho, po jaké ose chcete opakovat.

Pokud je element (třeba DIV) větší, než obrázek, tak by v tomto případě na místě, kam už obrázek nesahá bylo průhledné pozadí. Zobrazovalo by se tam pozadí z elementu, který je pod ním.

Ukotvení obrázku na pozadí vůči oknu prohlížeče

Pro úplnost je třeba ještě uvést jednu šikovnou hodnotu, a sice „fixed“. Standardně se obrázek drží elementu (třeba DIVu) a při posunu stránky směrem dolů se pohybuje i s elementem. Někdy to ale nechcete. Může se stát, že obrázek chcete pomyslně přišpendlit k oknu prohlížeče, tedy že obsah stránky se posouvat bude, ale obrázek zůstane namístě. K tomu se právě používá slovíčko „fixed“.

 Ukázka zápisu s ukotveným pozadím

selektor {
   background: url(../adresar/jmeno-obrazku.png) left top no-repeat fixed;
}

Kam dál

Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla