CSS Tutoriál VII. – Pozadí stránky

V tomto dílu se podíváme na různé způsoby úpravy pozadí stránky pomocí CSS.

Nejjednoduší vlastnost background-color nám udává barvu pozadí. Syntax pro ní je velmi jednoduchý:

body {background-color: #C8C8C8;}

Jejími hodnotami jsou barvy buďto hexadecimálně zapsané (#FFFFFF) nebo pomocí slov (red), pomocí rgb (255,0, 255) nebo rgba (specifikovaný alfa kanál) a nebo také HSL /HSLA. Při volbě barvy pozadí ať už celé stránky nebo jenom jednotlivého prvku vždy dbejte na to, aby se dal text na ní pohodlně číst a aby stránka přímo nebila do očí.

Pro nastavení obrázku na pozadí použijeme vlastnost background-image. Její hodnotou je url, co které zapisujeme cestu k obrázku. url vždy píšeme do jednoduchých závorek () a v úvozovkách ‚.

div {background-image: url ('image.jpg');}

Pro pozicování obrázku používáme ještě další podvlastnosti background. Jedním z nich je background-position. Pomocí ní nastavujeme startovní pozici obrázku. Můžeme nastavit jak slovy = left top, right center, center center (první hodnota je jakoby hodnotou x – horizontální pozice a druhá je pozice vertikální – y) nebo v procentech/jiných délkových jednotkách. Opět první hodnota je x a druhá y. Výchozím bodem ovšem je ovšem levý horní roh. Proto 0px 20px znamená, že obrázek bude kousek pod vrškem stránky a ne téměř vespod.

body {background-image: url ('image.gif'); background-position: 0px 20px;}

Pro nastavení opakování obrázku na pozadí slouží vlastnost background-repeat. Její hotnoty jsou repeat-x, repeat-y nebo no-repeat. Repeat-x znamená, že se bude opakovat pouze horizontálně, po ose x, repeat-y naopak znamená, že se bude opakovat pouze vertikálně po ose y. no-repeat zakazuje obrázku se opakovat.

body {background-image: url ('image.png'); background-repeat: repeat-y;}

Další nastavení, které úzce souvisí s obrázky je nastavení background-attachment. To nám totiž říká, jestli obrázek zůstane na místě v okně i při scrollování – fixed, nebo se scrolluje spolu se stránkou – scroll

body {background-attachment: fixed;}

Pro přesné nastavení toho, kam se nám barva nebo obrázek na pozadí rozšíří např v odstavci slouží vlastnost background-clip. Pokud chceme rozšířit například barevné pozadí jenom na oblast textu v sekci, použijeme hodnotu content-box. Pokud chceme jenom na vnitřek objektu, používáme padding-box. A pokud chceme zabarvit celou sekci, použijeme hodnotu border-box.

div {background-color: blue; background-clip: content-box;}

A nakonec pro velikost obrázku na pozadí použijeme vlastnost background-size. Ta opět nabývá hodnot délky. První hodnota určuje šířku, druhá výšku.

div {background-image: url ('image.png'); background-size: 200px 200px;}

Další vlastností, která již není tak důležitá, ale třeba jí taky někdy můžete využít je vlastnost background-origin. Tato vlastnost specifikuje k jaké části sekce má být obrázek relativní. Pokud nastavíme hodnotu padding-box, bude obrázek zarovnán podle levého horního rohu vnitřního konce ohraničení. Pokud nastavíme content-box, bude zarovnán podle levého horního rohu obsahu a pokud nastavíme border-box, zarovná se podle levého horního rohu vnějšího konce ohraničení.

Všechny tyto vlastnosti můžeme opět napsat jednoduše pod jedinou vlastnost background. Pořadí v jakém budeme zapisovat je (bez čárek):

background: background-color, background-image, background-repeat, background-origin, background-attachment, background-position 

Novou vlastností v CSS3 je možnost nastavit si barevný přechod na stránku jako pozadí. Doposud se to muselo řešit pouze pomocí vložení obrázku přechodu, teď je tu však zcela nová možnost, jak toto řešit elegantněji.

Vzhledem k tomu, že to je nová vlastnost, musíme přidávat na začátek předpony -o-, -moz-, -webkit-.

Přechody se nastavují pomocí atributů. Lineární přechod nastavujeme pomocí atributu linear-gradient. Syntax vypadá takto

background: linear-gradient (směr, barva, barva)

Pokud chceme udělat lineární přechod zeshora dolů, pak není nic jednoduššího než zapsat pouze 2 barvy, které chceme použít. Zapíšeme tedy třeba background: linear-gradient (black,blue) a prohlížeč zobrazí nahoře černou a přechod dole na modrou.

Pokud chceme z jiného směru, musíme napsat vždy jako první výchozí směr nebo „to“ a směr, kam směřujeme. Tedy například zprava doleva : background: linear-gradient (right, black, blue). Můžeme nastavit i diagonální přechod, v případě že specifikujeme výchozí pozici jako například top left. Při pozicování přechodu můžeme využít i stupně. Pokud tedy chceme například přechod, který je natočený o 90°, pak použijeme syntax background: linear-gradient (90deg, black, blue).

Můžeme nastavovat do přechodu i více barev než 2, nemusíme se omezovat. Díky tomu, že je možný zápis barev i v rgba můžeme nastavovat také alfa kanál a tím určovat proůhlednost barev. Opakování lineárního přechodu se nastavuje pomocí repeating-linear-gradient.

Můžeme také nastavovat radiální přechod – kruhový nebo elipsový. V tom případě je syntax

background: radial-gradient (barva centra, velikost tvaru, startovní barva, .. , konečná barva)

Jeho opakování nastavujeme pomocí repeating-radial-gradient.