Pouze tento týden sleva až 80 % na e-learning týkající se JavaScriptu
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
JavaScript týden

Lekce 17 - Pozadí elementů - velikost, pozice a přichycení v CSS 3 Nové

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

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

Pozadí elementů 2
localhost

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:

Pozadí elementů
localhost

background-repeat

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Čá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;
}
Pozadí elementů 2
localhost

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;
}
Pozadí elementů 2
localhost

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;
}
Pozadí elementů 2
localhost

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:

Pozadí elementů 2
localhost

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, Seznamy v CSS 3, si ukážeme, jak nastavit vlastní vzhledy seznamů a jak pracovat s jejich vlastnostmi.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 19x (885.51 kB)

 

Předchozí článek
Pozadí elementů - obrázek, barva, ohraničení v CSS 3
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!