Lekce 6 - Pozadí elementů: velikost, pozice a přichycení v CSS3

V minulé lekci, Pozadí elementů: obrázek, barva, ohraničení v CSS3, jsme se naučili jak nastavit elementům jednoduchou barvu nebo obrázek do pozadí.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak nastavit velikost, pozici, přichycení a případně opakování:

Pozicování pozadí

Když máme u našich elementů nastaven obrázek v pozadí, můžeme ho libovolně v rámci velikosti pozadí posouvat všemi směry. Jeho pozice se dá nastavit buď pomocí přednastavených hodnot nebo definicí vlastních vzdáleností. Ty přednastavené jsou:

• left top - Levý horní roh
• left center - Levý střed
• left bottom - Levý dolní roh
• right top - Pravý horní roh
• right center - Pravý střed
• right bottom - Pravý dolní roh
• center top - Horní střed
• center center - Střed
• center bottom - Dolní střed

Pokud ale potřebujeme specifickou vzdálenost, použijeme:

• x% y% - Souřadnice zadané v procentech. Levý horní roh je 0% 0%, pravý dolní je 100% 100%.
• xpos ypos - Souřadnice zadané pozicí, tedy nejčastěji pixely. Levý horní roh má pozici 0px 0px. Můžeme míchat pixely s např. procenty.
• inherit - Pozice se zdědí z rodičovského elementu.

První vlastnost xpos určuje vodorovnou souřadnici, druhá vlastnost ypos svislou souřadnici. Pokud u výše uvedených hodnot jednu vynecháme (např. zadáme jen left), druhá se bude centrovat.

Zkusíme tedy nyní posunout náš pohybující se obrázek více doprava. Budeme pracovat s příklady z minulé lekce. V CSS třídě našeho elementu .pohyblivy si nastavíme vlastnost background-position na hodnotu 100px:

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

Jak můžeme vidět, obrázek se nám posunul o 100 pixelů směrem doprava:

background-repeat

Část obrázku která nyní není vidět kvůli posunu vpravo se nám ale objevila z levé strany. Pokud není definováno jinak, jsou totiž obrázky nastavené do pozadí poskládány v těsně vedle sebe na všech stranách stále dokola. Této vlastnosti se říká background-repeat. Vlastnosti můžeme nastavit následující hodnoty:

• repeat (výchozí) - Pozadí se opakuje vodorovně i svisle. Tato hodnota je výchozí a plocha pozadí elementu je tedy vydlážděna obrázky / pozadím.
• repeat-x - Pozadí se opakuje pouze vodorovně.
• repeat-y - Pozadí se opakuje pouze svisle.
• no-repeat - Pozadí se neopakuje vůbec a zobrazí se jako jeden obrázek.
• inherit - Vlastnost bude zděděna od rodičovského elementu.

My nechceme, aby se nám obrázek v pozadí opakoval, proto do naší třídy .pohyblivy nastavíme ještě vlastnost background-repeat na hodnotu no-repeat:

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

background-size

Nyní se podíváme znovu na náš první obrázek stromu. Protože byl příliš veliký, byla ho vidět pouze část. My však můžeme libovolně měnit jeho velikost pomocí vlastnosti background-size. Hodnoty u této vlastnosti se nastavují následovně:

• šířka výška - Zadáme hodnoty jako třeba %, px, em a další. Pokud zadáme jen jednu hodnotu, druhá se automaticky dopočítá tak, aby byl zachován poměr stran (přesněji se za ni dosadí hodnota auto). Pozor, procenta se nechovají úplně intuitivně, vyjadřují jakou část pozadí rodičovského elementu má obrázek pokrývat, nemají tedy vůbec nic společného s velikostí obrázku samotného.
• cover - Pozadí se zvětší na maximální možnou velikost, aby zakrývalo rodičovský element a zůstal zachován poměr stran. Část pozadí bude pravděpodobně oříznuta.
• contain - Pozadí se zvětší na maximální možnou velikost, aby se vešlo do rodičovského elementu a zůstal zachován poměr stran.

Náš element má velikost 250x250 pixelů, nastavíme tedy v naší třídě .staticky, aby se velikost obrázku automaticky měnila podle něj za pomocí vlastnosti background-size pomocí hodnoty contain:

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

Díky tomuto nastavení je tedy vidět strom celý

background-origin

Jedna z posledních vlastností pozadí je background-origin. Pomocí ní se nastavuje, k čemu se má vztahovat pozice obrázku na pozadí elementu. Její tři možné hodnoty nastavení jsou:

• padding-box (výchozí) - Pozice obrázku pozadí se vztahuje k oblasti elementu včetně paddingu (vnitřní "vycpávky").
• border-box - Pozice obrázku pozadí se vztahuje k oblasti elementu včetně rámečku.
• content-box - Pozice obrázku pozadí se vztahuje k oblasti elementu bez rámečku a paddingu.

Pro lepší viditelnost si zde trochu upravíme třídu .staticky přidáním okraje border: 5px solid blue;, vnitřního odsazení padding: 40px; a zrušením opakování obrázku v pozadí background-repeat: no-repeat;. Nakonec nastavíme aby se náš obrázek vztahoval k textu který je v elementu, a né k jeho okraji pomocí background-origin: content-box;:

.staticky {
  background-image: url('tree.jpg');
  width: 250px;
  height: 250px;
  background-size: contain;
  padding: 40px;
  border: 10px solid blue;
  background-repeat: no-repeat;
  background-origin: content-box;
}

background-attachment

Poslední vlastností, která se dá u pozadí nastavit, je background-attachment. Pomocí ní nastavujeme obrázku na pozadí přichycení se ke stránce. Přichycením se myslí to, že obrázek drží na jednom místě i v případě, že se stránka roluje posuvníkem. Nastavuje se pomocí těchto tří hodnot:

• scroll (výchozí) - Obrázek na pozadí se roluje spolu s obsahem.
• fixed - Obrázek na pozadí zůstává na své pozici.
• inherit - Chování se zdědí z rodičovského elementu.

Uděláme tedy v naší třídě .staticky ještě jednu poslední úpravu. Přidáme jí vlastnost overflow: scroll;, aby jsme mohli posouvat obsahem a background-attachment: scroll;, aby se nám obrázek posouval zároveň s posunem:

.staticky {
  background-image: url('tree.jpg');
  width: 250px;
  height: 250px;
  background-size: contain;
  padding: 40px;
  border: 10px solid blue;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-attachment: scroll;
  overflow: scroll;
}

Pro viditelnost efektu posunu ještě element <div> několikrát odřádkujeme:

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

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 následujícím kvízu, Kvíz - Pozadí, posuvníky a kurzory v CSS3, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.