Jistě jste se někdy na webu setkali s pozadím, které se samo rolovalo se stránkou, takže jste měli možnost vidět stále ten samý obrázek na pozadí na stejném míste monitoru. Pomocí css se dá s pozadím nebo obrázkem na pozadí dělat i více vychytávek, které se zde pokusím napsat.

Barva pozadí

Barva pozadí je - vedle obrázků na pozadí - asi nejpoužívanější. Tuto vlastnost se nazívá background-color. Barvu jako takovou můžeme zapsat hexadecimálním kódem (např. #CC0000 - tato barva bude tmavě červená), a nebo anglickými názvy (white, red,...). A jak to zapíšeme v css:

 

 body {background-color: #FFFFCC;}

Barva pozadí bude světle-žlutá. Background-colour je velmi dobře podporovaná vlastnost, zobrazuje se ve všech moderních prohlížečích, takže s použitím by neměl být problém;-)

Obrázek na pozadí

Také velice používaná vlastnost pozadí. Do css ji zapisujeme jako background-image. Background-image lze dále stylovat, o tom píši níže. Celá definice bude vypadat takto:


 body {background-image: url(obrazek.png);}

Cesta k obrázku muže vést i na jinou srtránku, v tom případě místo "obrazek.gif" napíšeme celou adresu obrázku, umístěném na internetu (např. http://neco.cz/obrazky/pozadi.gif). Pro obrázek na pozadí se používají například formáty jpg, gif, a png. A málem bych zapoměl dodat, že obrázek na pozadí má přednost před barvou pozadí, tudíž jí překryje.

Opakování obrázku na pozadí

Obrázek se dá i "libovolně" opakovat po ose "x" a "y", dále se dá i nastavit no-repeat, čili "neopakovat". Opakování po ose "x" znamená, že se obrázek bude opakovat horizontálně, jmenuje se repeat-x. Z toho logicky vyplívá, že pokud se bude obrázek opakovat v ose "y", bude se opakovat "vertikálně", tedy odzhora dolů. To se nazívá repeat-y. Horizontální opakování pozadí zapíšeme takto


 body {background-image: url(obrazek.png);

	background-repeat: repeat-x;}

a vertikální takle


 body {background-image: url(obrazek.png);

	background-repeat: repeat-y;}

Prohodíme tedy jen písmenka x a y. Kdybychom nechtěli, aby se obrázek opakoval, zapíšeme to takto:


 body {background-image: url(obrazek.png);

	background-repeat: no-repeat;}

Background-repeat je u prohlížečů také velmi dobře podporovaná vlastnost. Také můžeme napsat repeat, ale je to zbytečné, protože když nic nezadáme, obrázek se bude opakovat automaticky.

Pozicování obrázku na pozadí

CSS vlastnost background-position určuje umístění obrázkového pozadí. Pozicování vychází z opakování obrázku po ose "x" a "y" (horizontálně a vertikálně). Pozicováním můžeme úrčit, jestli má být obrázek dole (bottom), v pravo (right), v levo (left), a nahoře (top). Pokud se bude obrázek opakovat horizontálně, pozicování v pravo a levo potřebovat nebudem.

budeme-li chtít, aby byl obrázek, který se opakuje po ose "x", přimáčklý dole, napíšeme toto:


body {background-image: url(obrazek.png);

	background-repeat: repeat-x;

        bacgkround-position: bottom;

}

Nebudo zde vypisovat všechny možnosti, myslím že pozicování pozadí vlevo, vpravo, a nahoru by jste jistě zvládli;-)
Pozor! Netscape tuto vlastnost ignoruje, obrázek umístí do levého horního rohu!

Pozadí jako přibité

Vlastnost background-attachment určuje rolování obrázkového pozadí. Můžeme použít buď scroll pro rolování obrázku se stránkou, a nebo fixed, kydy se pozadí drží na místě, je přibité.
Příklad pro rolování pozadí se stránkou:


 body {background-image: url(obrazek.png);

background-attachment:scroll;}

a pro přibití pozadí, tedy aby se se stránkou nerolovalo, napíšeme místo scroll hodnotu fixed.
A podpora? Tuto vlstnost podporují zase všechny moderní prohlížeče, ale Internet Explorer čtvrté verze a NN4 to neumí.

To je asi tak vše, kdyby jste měli nějaké připomínky (jako že jich bude asi hodně) či dotazy, můžete se vyjádřit v diskusi.

David Kohout, www.kohoutovo.net

Autor: Kohout

Facebook Twitter Topčlánky.cz Linkuj.cz

Sdílet