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