16. diel - Pozadie elementov - obrázok, farba, ohraničenie

V predchádzajúcej lekcii, Úpravy a nastavenia kurzorov v CSS3 , sme sa dozvedeli, ako si za pomocou CSS3 vytvoriť vlastný vzhľad kurzora.

Vitajte u ďalšej lekcie ohľadom nastavenia v CSS 3, v ktorej si ukážeme, ako elementom nastaviť určité pozadie. V tejto lekcii sa teda naučíme nasledujúce:

Vlastnosť background

Skoro každému bežnému elementu na stránke možno nastaviť nejakú vlastnosť pozadie. Jedná sa o pozadí všetkého priestoru, ktorý element na stránke zaberá. V CSS3 môžeme v tejto vlastnosti definovať aj viac pozadia oddelených čiarkou. Pozadie môže mať niekoľko vlastností:

• background-color - Farba pozadia
• background-position - Pozícia pozadie
• background-size - Veľkosť pozadie
• background-repeat - Opakovanie pozadí
• background-origin - Špecifikuje na čo sa má vzťahovať pozície pozadie
• background-clip - Orezanie pozadia
• background-attachment - Prichytenie pozadie
• background-image - Obrázok alebo obrázky ako pozadie
• background-blend-mode - Nastavenie prelínanie vrstiev pozadia

Ak chceme, môžeme všetky nastavenia napísať v rámci syntaxe vlastnosti background:

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

Na poradí nezáleží, môžeme tak napríklad vynechať napr. Vlastnosť color ai. Napr. kód:

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

nastaví ako pozadie obrázok tree.gif, ktorý bude posunutý o 100px po osi y (zhora) ao 150px po osi x (zľava). Obrázku taktiež nastavíme veľkosť 200px × 200px.

Farba pozadia

Teraz si ukážeme, ako nastaviť nejakému elementu farebné pozadie. Vytvoríme si teda nejaké HTML elementy, ktoré ofarbíme:

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

Každému pridelíme nejakú CSS triedu (.pozadi-cervene, .pozadi-zelene, .pozadi-modre), v ktorej potom nastavíme vlastnosť 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ýsledok bude vyzerať nejako takto:

Ako môžeme vidieť, farba sa nám nezmení iba za textom, ale aj na celom riadku. Zakaždým je to teda pozadie celého elementu.

Orezanie pozadia

Ďalšia vlastnosť, ktorú si ukážeme, je background-clip, čiže orezanie pozadia. Vďaka nemu je možné nastaviť, napríklad či sa má sfarbiť aj pozadie okrajov alebo nie. Vo väčšine prípadov by to nebolo dôležité, pretože okraje sú v popredí oprati pozadí. Dajme ale tomu, že chceme aby sa náš okraj skladal z bodiek. Vytvoríme si ďalšie tri 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é triede nastavíme bodkovaný okraj border: 5px dotted black;, Vnútorné odsadenie padding: 10px; a nejakú farbu background-color: yellow; (Žltá). Potom prvej triede nastavíme background-clip: border-box;, Druhé background-clip: padding-box; a tretí 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 ako môžeme vidieť, v prvom prípade je nastavené žlté pozadie aj za bodkovaným okrajom, v druhom prípade je všade okrem nášho okraje a v treťom prípade je len pod textom, čiže obsahom elementu:

Obrázok ako pozadie

Ako posledný si ešte ukážeme, že pozadie nemusí byť iba farebné. Ako pozadie sa totiž dajú nastaviť aj rôzne obrázky. Podporované formáty sú .png, .jpg, .jpeg, .svg, .gif, .bmp, .dit a tak ďalej. To potom záleží podľa toho ako chcete naďalej s pozadím pracovať. Ak to bude pozadie u elementu, ktorý nijako nemení svoju veľkosť, či už je stránka otvorená kdekoľvek, môže to byť jednoduchý .png alebo .jpg obrázok. Pokiaľ ale bude element nastavený s premenlivou veľkosťou, obrázky na pozadí sa môžu zobrazovať nedostatočne alebo naopak neprimerane veľké. Ako príklad si teda vytvoríme ešte jeden HTML element s CSS triedou .staticky:

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

V našej triede .staticky nastavíme vlastnosť background-image: url(''). Medzi úvodzovky do url('') napíšeme názov súboru obrazu. V súboroch k lekcii to bude teda zapísané nasledujúcim spôsobom background-image: url('tree.png'):

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

V našom elementu ale nemáme žiadny text, musíme mu teda v triede staticky nastaviť ešte preddefinovanú veľkosť:

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

Vznikne nám teda element s veľkosťou 250px × 250px s obrázkom nastaveným ako pozadie:

Bohužiaľ nami vybraný obrázok je ďaleko väčší, než 250px × 250px pixelov, a teda je ho vidieť len malá časť. Nezabúdajme, že namiesto obyčajného obrázku možno nastaviť ako pozadie aj pohybujúce sa GIF. Urobíme si teda ešte jeden HTML element s novou CSS triedou .pohyblivy:

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

Veľkosť width a height bude 100% veľkosť nášho obrázku, nastavíme teda hodnotu na 400px × 400px:

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

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, Pozadia elementov - veľkosť, pozícia a prichytenie v CSS 3 , sa naučíme, ako u pozadí elementov nastaviť veľkosť, pozíciu, prichytenie a prípadne opakovania.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.