CSS Pozadie



S pozadím sa spájajú tieto atríbuty:


  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position




background-color je vlastnosť, ktorá urobí pozadie niečoho určitej farby. Môže to byť pozadie paragrafu, ale aj pozadie celej stránky.


Príklad:

body {
background-color:blue;
}

background-image nastavý pozadie nejakého elementu na nejaký obrázok. Obrázok sa zduplikuje toľkokrát, aby pokryl celú obrazovku. Pozor, keď dávate obrázky dajte pozor aby ostal text pred ním čitateľný, teda zvoľte spravný kontrast farieb elementu a pozadia.


Príklad:

body {
background-image: url("images/goat-2669853_960_720.png");
}

To ako sa obrázok opakuje sa nastavuje ďaľším atribútom background-repeat. Veľa pozadí nevyzerá dobre, keď sa opakujú, preto sa dá upraviť smer, v ktorom sa bude obrázok opakovať. Štandardne sa obrázok opakuje všetkými smermi. Keď chcete aby sa opakoval iba horizontálne tak napíšete:


Príklad:

body {
background-image: url("images/goat-2669853_960_720.png");
background-repeat: x;
}

Keď chcete aby sa to pozadie opakovalo iba vertikálne, tak zadáte namiesto x y. Obrázky ako pozadie sa opakujú, ale ak chcete aby sa vôbec neopakovali tak zadáte namiesto x alebo y no-repeat.


Ďalšia vec ktorú sa dá nastavovať pozadiu je pozícia obrázku. To urobíte pomocou príkazu background-position. Vlastnosť viete nastaviť pomocou 4 slov: top, right, bottom, left.


Ale taktiež viete nastaviť pozíciu aj pomocou percent. V takom prípade dáme namiesto top, right, bottom, left napíšeme dve čísla v percentách. Prvé bude symbolizovať koľko percent od vrchu stránky bude umiestnený obrázok a druhé koľko percent zľava. Takto isto to funguje aj s pixelami, ale musíte iba zmeniť % na px.


Príklad:


Avšak ak potrebujete, aby bol obrázok fixný, teda aby bol na obrazovke aj pri skrolovaní, tak na to použijete príkaz background-attachment.


Príklad:

body {
background-image: url("images/goat-2669853_960_720.png");
background-position: left-bottom;
background-attachment: fixed;
background-repeat: no-reapeat;
}



!Pozor! Pri použití príkazu background-attachment musíme vždy použiť aj príkaz background-repeat a zadať mu hodnoutu no-repeat, lebo inak by celý príkaz background-attachment nemal zmysel.