Home >> CSS návod >> CSS Pozadí

CSS Pozadí

V této lekci se naučíme pracovat s pozadím v CSS. Mimo to si ukážeme také pár triků.

Barva pozadí


<p style="height:120px; background-color:green;">Tento text má zelené pozadí.</p>

Výsledek:

Tento text má zelené pozadí.

Obrázek na pozadí

Pro příklad použijeme tento obrázek.


<p style="height:120px;background-image:url(http://www.klikzone.cz/obrazky/zluty-ctverec.gif);">Tento text má na pozadí obrázek.</p>

Výsledek:

Tento text má na pozadí obrázek.

Opakování obrázku na pozadí

V CSS je možné nastavit zda se obrázek na pozadí má opakovat či nemá.


<p style="height:120px;background-image:url(http://www.klikzone.cz/obrazky/zluty-ctverec.gif);background-repeat:no-repeat;">Obrázek na pozadí se neopakuje. </p>

Výsledek:

Obrázek na pozadí se neopakuje.

Opakování obrázku v ose

Obrázek na pozadí se také může opakovat podle osy x (vodorovně) nebo podle osy y (svisle).

Příklad pro vodorovné opakování, tedy v ose x.

Pro tento příklad použijeme tento obrázek:

Pozadí, které se opakuje pouze vodorovně


<p style="height:200px;background-image:url(http://www.klikzone.cz/obrazky/pozadi-x.gif);background-repeat:repeat-x;">Obrázek na pozadí se opakuje vodorovně. </p>

Výsledek:

Obrázek na pozadí se opakuje vodorovně.

Můžete si všimnout, že se obrázek opravdu opakuje pouze vodorovně (v ose x).

Příklad pros vislé opakování obrázku, tedy v ose y.

Pro tento příklad použijeme tento obrázek:


<p style="height:200px;background-image:url(http://www.klikzone.cz/obrazky/pozadi-y.gif);background-repeat:repeat-y;">Obrázek na pozadí se opakuje vertikálně. </p>

Výsledek:

Obrázek na pozadí se opakuje vertikálně.

Nyní se obrázek opakuje svisle (v ose y).

Pozice obrázku na pozadí

Můžete také určit pozici obrázku na pozadí.


<p style="height:200px;background-image:url(http://www.klikzone.cz/obrazky/zluty-ctverec.gif);background-repeat:no-repeat;background-position:center top;">Obrázek na pozadí je umístěn nahoru na střed.</p>

Výsledek:

Obrázek na pozadí je umístěn nahoru na střed.

Možné hodnoty

Hodnota	Vysvětlivka
top left top center top right center left center center center right bottom left bottom center bottom right	Zde je seznam možných hodnot pro pozici obrázku. Přednastavená hodnota je vlevo nahoře (top left).
x% y%	Pozici obrázku na pozadí můžete také specifikovat pomocí procentuálních hodnot. Za x se zadává horizontální hodnota (tedy jak daleko bude obrázek umístěn od levého kraje) a za y se zadává vertikální hodnota (jak daleko bude obrázek umístěn od vrchu). Počátek je v levém horním rohu (0% 0%). Pro pravý dolní roh je hodnota 100% 100%. Pokud specifikujete pouze jednu hodnotu, ta druhá bude automaticky nastavena na 50%.
x(px) y(px)	Umístění můžete také určit pomocí pixelů. Tato varianta má stejné pravidla jako umístění pomocí procent. Pro levý horní roh je hodnota 0px 0px. Můžete také mixovat procenta a pixelové hodnoty (například: 200px 100%).

Zafixovaná pozice obrázku

Obrázek můžete tzv. "zafixovat". Takovýto obrázek potom nebude scrollovat.


<p style="height:200px;width:200px;overflow:scroll;background-image:url(http://www.klikzone.cz/obrazky/zluty-ctverec.gif);background-attachment:fixed;">Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat. </p>

Výsledek:

Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.Tento brázek na pozadí je zafixovaný, nebude tedy scrollovat.

* V některých prohlížečích se obrázek nemusí zobrazit

Další lekce >>

<< Předchozí lekce