17. diel - Pozadia elementov - veľkosť, pozícia a prichytenie v CSS 3

V minulej lekcii, Pozadie elementov - obrázok, farba, ohraničenie , sme sa naučili ako nastaviť elementom jednoduchú farbu alebo obrázok do pozadia.

Vitajte u ďalšej lekcie ohľadom nastavenia v CSS 3, v ktorej si ukážeme, ako nastaviť veľkosť, pozíciu, prichytenie a prípadne opakovania:

Pozíciovanie pozadia

Keď máme u našich elementov nastavený obrázok v pozadí, môžeme ho ľubovoľne v rámci veľkosti pozadí posúvať všetkými smermi. Jeho pozícia sa dá nastaviť buď pomocou prednastavených hodnôt alebo definíciou vlastných vzdialeností. Tie prednastavené sú:

• left top - Ľavý horný roh
• left center - Ľavý stred
• left bottom - Ľavý dolný roh
• right top - Pravý horný roh
• right center - Pravý stred
• right bottom - Pravý dolný roh
• center top - Horní stred
• center center - Stred
• center bottom - Dolné stred

Pokiaľ ale potrebujeme špecifickú vzdialenosť, použijeme:

• x% y% - Súradnice zadané v percentách. Ľavý horný roh je 0% 0%, pravý dolný je 100% 100%.
• xpos ypos - Súradnice zadanej pozíciou, teda najčastejšie pixely. Ľavý horný roh má pozíciu 0px 0px. Môžeme miešať pixely s napr. Percentami.
• inherit - Pozície sa zdedí z rodičovského elementu.

Prvá vlastnosť xpos určuje vodorovnú súradnicu, druhá vlastnosť ypos zvislú súradnicu. Ak u vyššie uvedených hodnôt jednu vynecháme (napr. Zadáme len left), druhá sa bude centrovať.

Skúsime teda teraz posunúť náš pohybujúce sa obrázok viac doprava. Budeme pracovať s príkladmi z minulej lekcie. V CSS triede nášho elementu .pohyblivy si nastavíme vlastnosť background-position na hodnotu 100px:

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

Ako môžeme vidieť, obrázok sa nám posunul o 100 pixelov smerom doprava:

background-repeat

Časť obrázku ktorá teraz nie je vidieť kvôli posunu vpravo sa nám ale objavila z ľavej strany. Pokiaľ nie je definované inak, sú totiž obrázky nastavené do pozadia poskladané v tesne vedľa seba na všetkých stranách stále dokola. Tejto vlastnosti sa hovorí background-repeat. Vlastnosti môžeme nastaviť nasledujúce hodnoty:

• repeat (predvolené) - Pozadie sa opakuje vodorovne aj zvisle. Táto hodnota je predvolená a plocha pozadia elementu je teda vydláždená obrázky / pozadím.
• repeat-x - Pozadie sa opakuje iba vodorovne.
• repeat-y - Pozadie sa opakuje len zvisle.
• no-repeat - Pozadie sa neopakuje vôbec a zobrazí sa ako jeden obrázok.
• inherit - Vlastnosť bude zdedená od rodičovského elementu.

My nechceme, aby sa nám obrázok v pozadí opakoval, preto do našej triedy .pohyblivy nastavíme ešte vlastnosť 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

Teraz sa pozrieme znovu na náš prvý obrázok stromu. Pretože bol príliš veľký, bola ho vidieť iba časť. My však môžeme ľubovoľne meniť jeho veľkosť pomocou vlastnosti background-size. Hodnoty u tejto vlastnosti sa nastavujú nasledovne:

• šířka výška - Zadáme hodnoty ako napríklad %, px, em a ďalšie. Pokiaľ zadáme len jednu hodnotu, druhá sa automaticky dopočíta tak, aby bol zachovaný pomer strán (presnejšie sa za ňu dosadí hodnota auto). Pozor, percentá sa nesprávajú úplne intuitívne, vyjadrujú akú časť pozadia rodičovského elementu má obrázok pokrývať, nemajú teda vôbec nič spoločné s veľkosťou obrázku samotného.
• cover - Pozadie sa zväčší na maximálnu možnú veľkosť, aby zakrývalo rodičovský element a zostal zachovaný pomer strán. Časť pozadie bude pravdepodobne orezaná.
• contain - Pozadie sa zväčší na maximálnu možnú veľkosť, aby sa vošlo do rodičovského elementu a zostal zachovaný pomer strán.

Náš element má veľkosť 250x250 pixelov, nastavíme teda v našej triede .staticky, aby sa veľkosť fotky automaticky menila podľa neho za pomocou vlastnosti background-size pomocou hodnoty contain:

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

Vďaka tomuto nastavenie je teda vidieť strom celý:)

background-origin

Jedna z posledných vlastností pozadí je background-origin. Pomocou nej sa nastavuje, na čo sa má vzťahovať pozície obrázku na pozadí elementu. Jej tri možné hodnoty nastavenia sú:

• padding-box (predvolené) - Pozícia obrázka pozadia sa vzťahuje k oblasti elementu vrátane padding (vnútorný "vypchávky").
• border-box - Pozícia obrázka pozadia sa vzťahuje k oblasti elementu vrátane rámčeka.
• content-box - Pozícia obrázka pozadia sa vzťahuje k oblasti elementu bez rámčeka a padding.

Pre lepšiu viditeľnosť si tu trochu upravíme triedu .staticky pridaním okraja border: 5px solid blue;, Vnútorného odsadenie padding: 40px; a zrušením opakovanie obrázka v pozadí background-repeat: no-repeat;. Nakoniec nastavíme aby sa náš obrázok vzťahoval k textu ktorý je v elementu, a né k jeho okraju pomocou 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ý vlastnosťou, ktorá sa dá u pozadie nastaviť, je background-attachment. Pomocou nej nastavujeme obrázku na pozadí prichytenie sa ku stránke. Prichytením sa myslí to, že obrázok drží na jednom mieste aj v prípade, že sa stránka roluje posuvníkom. Nastavuje sa pomocou týchto troch hodnôt:

• scroll (predvolené) - Obrázok na pozadí sa roluje spolu s obsahom.
• fixed - Obrázok na pozadí zostáva na svojej pozícii.
• inherit - Správanie sa zdedí z rodičovského elementu.

Urobíme teda v našej triede .staticky ešte jednu poslednú úpravu. Pridáme jej vlastnosť overflow: scroll;, Aby sme mohli posúvať obsahom a background-attachment: scroll;, Aby sa nám obrázok posúval zároveň s posunom:

.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;
}

Pre viditeľnosť efektu posunu ešte element <div> niekoľkokrát odřádkujeme:

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

výsledok:

Ak niečomu nerozumiete, odporúčame stiahnuť si súbory v prílohe k tejto lekcii a všetko si poriadne vyskúšať:)

V ďalšej lekcii, Zoznamy v CSS 3 , si ukážeme, ako nastaviť vlastné vzhľady zoznamov a ako pracovať s ich vlastnosťami.