Lekce 5 - Pozadí elementů: obrázek, barva, ohraničení v CSS3

V předchozí lekci, Úpravy a nastavení kurzorů v CSS3, jsme se dozvěděli, jak si za pomocí CSS3 vytvořit vlastní vzhled kurzoru.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak elementům nastavit určité pozadí. V této lekci se tedy naučíme následující:

Vlastnost background

Skoro každému běžnému elementu na stránce lze nastavit nějakou vlastnost pozadí. Jedná se o pozadí veškerého prostoru, který element na stránce zabírá. V CSS3 můžeme v této vlastnosti definovat i více pozadí oddělených čárkou. Pozadí může mít několik vlastností:

• background-color - Barva pozadí
• background-position - Pozice pozadí
• background-size - Velikost pozadí
• background-repeat - Opakování pozadí
• background-origin - Specifikuje k čemu se má vztahovat pozice pozadí
• background-clip - Oříznutí pozadí
• background-attachment - Přichycení pozadí
• background-image - Obrázek nebo obrázky jako pozadí
• background-blend-mode - Nastavení prolínání vrstev pozadí

Pokud chceme, můžeme všechna nastavení napsat v rámci syntaxe vlastnosti background:

background: color position/size repeat origin clip attachment image;

Na pořadí nezáleží, můžeme tak třeba vynechat např. vlastnost color aj. Např. kód:

background: url('tree.gif') 100px 150px/200px;

nastaví jako pozadí obrázek tree.gif, který bude posunut o 100px po ose y (zeshora) a o 150px po ose x (zleva). Obrázku taktéž nastavíme velikost 200px×200px.

Barva pozadí

Nyní si ukážeme, jak nastavit nějakému elementu barevné pozadí. Vytvoříme si tedy nějaké HTML elementy, které obarvíme:

<div>Červené pozadí</div>
<div>Zelené pozadí</div>
<div>Modré pozadí</div>

Každému přidělíme nějakou CSS třídu(.pozadi-cervene, .pozadi-zelene, .pozadi-modre), ve které poté nastavíme vlastnost background-color na red/green/blue.

<div class="pozadi-cervene">Červené pozadí</div>
<div class="pozadi-zelene">Zelené pozadí</div>
<div class="pozadi-modre">Modré pozadí</div>

.pozadi-cervene {
  background-color: red;
}

.pozadi-zelene {
  background-color: green;
}

.pozadi-modre {
  background-color: blue;
}

Výsledek bude vypadat nějak takto:

Jak můžeme vidět, barva se nám nezmění pouze za textem, ale i na celém řádku. Pokaždé je to tedy pozadí celého elementu.

Oříznutí pozadí

Další vlastnost, kterou si ukážeme, je background-clip, neboli oříznutí pozadí. Díky němu lze nastavit, například jestli se má zbarvit i pozadí okrajů nebo nikoliv. Ve většině případů by to nebylo důležité, protože okraje jsou v popředí oprati pozadí. Dejme ale tomu, že chceme aby se náš okraj skládal z teček. Vytvoříme si další tři HTML elementy:

<div class="border-box">Pozadí za tečkami</div>
<div class="padding-box">Bez pozadí za tečkami</div>
<div class="content-box">Pozadí pouze pod obsahem elementu</div>

Každé třídě nastavíme tečkovaný okraj border: 5px dotted black;, vnitřní odsazení padding: 10px; a nějakou barvu background-color: yellow; (žlutá). Poté první třídě nastavíme background-clip: border-box;, druhé background-clip: padding-box; a třetí background-clip: content-box;:

 .border-box {
  border: 5px dotted black;
  padding: 10px;
  background-color: yellow;
  background-clip: border-box;
 }

.padding-box {
  border: 5px dotted black;
  padding: 10px;
  background-color: yellow;
  background-clip: padding-box;
 }

.content-box {
  border: 5px dotted black;
  padding: 10px;
  background-color: yellow;
  background-clip: content-box;
 }

A jak můžeme vidět, v prvním případě je nastaveno žluté pozadí i za tečkovaným okrajem, v druhém případě je všude kromě našeho okraje a v třetím případě je pouze pod textem, neboli obsahem elementu:

Obrázek jako pozadí

Jako poslední si ještě ukážeme, že pozadí nemusí být pouze barevné. Jako pozadí se totiž dají nastavit i různé obrázky. Podporované formáty jsou .png, .jpg, .jpeg, .svg, .gif, .bmp, .dit a tak dále. To potom záleží podle toho jak chcete nadále s pozadím pracovat. Pokud to bude pozadí u elementu, který nijak nemění svou velikost, ať už je stránka otevřená kdekoliv, může to být jednoduchý .png nebo .jpg obrázek. Pokud ale bude element nastaven s proměnlivou velikostí, obrázky na pozadí se mohou zobrazovat nedostatečně nebo naopak nepřiměřeně velké. Jako příklad si tedy vytvoříme ještě jeden HTML element s CSS třídou .staticky:

<div class="staticky">Obrázek v pozadí</div>

V naší třídě .staticky nastavíme vlastnost background-image: url(''). Mezi uvozovky do url('') napíšeme název souboru obrázku. V souborech k lekci to bude tedy zapsáno následujícím způsobem background-image: url('tree.png'):

.staticky {
 background-image: url('tree.png');
}

V našem elementu ale nemáme žádný text, musíme mu tedy v třídě staticky nastavit ještě předdefinovanou velikost:

.staticky {
 background-image: url('tree.png');
 width: 250px;
 height: 250px;
}

Vznikne nám tedy element o velikosti 250px×250px s obrázkem nastaveným jako pozadí:

Bohužel námi vybraný obrázek je daleko větší, než 250px×250px pixelů, a tudíž je ho vidět jenom malá část. Nezapomínejme, že místo obyčejného obrázku lze nastavit jako pozadí i pohybující se GIF. Uděláme si tedy ještě jeden HTML element s novou CSS třídou .pohyblivy:

<div class="pohyblivy">Pohyblivý obrázek v pozadí</div>

Velikost width a height bude 100% velikost našeho obrázku, nastavíme tedy hodnotu na 400px×400px:

.pohyblivy {
 background-image: url('tree.gif');
 width: 400px;
 height: 400px;
}

Výsledek:

Pokud něčemu nerozumíte, doporučujeme stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet

V další lekci, Pozadí elementů: velikost, pozice a přichycení v CSS3, se naučíme, jak u pozadí elementů nastavit velikost, pozici, přichycení a případně opakování.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.