Predmetová komisia ELT a INF

Učebnica CSS - Základy - Styling pozadia

CSS Basic - Styling Backgrounds

« Predchádzajúca Ďalšia kapitola »

CSS vlastnosť pozadie slúži na definovanie efektov na pozadí prvku.

CSS vlastnosti pre efekty na pozadí:

  • Pozadie - farba
  • Pozadie - obrázok
  • Pozadie - opakovanie
  • Pozadie - príloha
  • Pozadie - pozícia

 

Farba pozadia

Background - color vlastnosť určuje farbu pozadia prvku.

Farbu pozadia stránky je definovaná v tele selektora

Príklad

body {background-color:#b0c4de;}

Vyskúšajte si to »

Nezačínajte ID meno s číslom! To nebude fungovať v Mozille/Firefoxe.

Farba pozadia môže byť špecifikovaná:

  • Meno - názov farby, rovnako ako "červený"
  • RGB - RGB hodnoty, ako "rgb (255,0,0)"
  • Hex - hexadecimálne hodnoty, ako "# FF0000"

V nižšie uvedenom príklade, h1, p, a div prvky majú rôzne farby pozadia

Príklad

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Vyskúšajte si to »

Obrázok na pozadí

Pozadie - image vlastnosť umožňuje použíť obrázok ako pozadie prvku.

V predvolenom nastavení sa obraz opakuje, takže pokrýva celý element.

Obrázok na pozadí pre stránky môžete nastaviť aj takto:

Príklad

body {background-image:url('paper.gif');}

Vyskúšajte si to »

Nižšie je uvedený príklad zlej kombinácii textu a obrázku na pozadí. Text je takmer nečitateľný:

Príklad

body {background-image:url('bgdesert.jpg');}

Vyskúšajte si to »

Obrázok na pozadí - Opakovanie vodorovne alebo zvisle

V predvolenom nastavení na pozadí - image vlastnosti sa opakuje obraz horizontálne i vertikálne.

Niektoré obrázky je treba opakovať iba vodorovne alebo zvisle, alebo budú vyzerať divne, ako je tento:

Príklad

body
{
background-image:url('gradient2.png');
}

Vyskúšajte si to »

Ak sa obraz opakuje len horizontálne (repeat - x), bude pozadie vyzerať lepšie:

Príklad

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Vyskúšajte si to »

Pozadie Obrázok - Nastaviť pozíciu na no - repeat

Poznámka: Pri použití obrázku na pozadie použite obrázok, ktorý neruší text.

Zobrazuje iba raz obrazok ktorý je na pozadí - no-repeat:

Príklad

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Vyskúšajte si to »

Vo vyššie uvedenom príklade obrázok na pozadí je znázornený na rovnakom mieste ako text. Skúsme zmeniť umiestnenie obrázka, tak aby nerušil čitateľnosť textu.

Poloha obrázku je určený background - position vlastnosťou:

Príklad

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Vyskúšajte si to »

Pozadie - Vlastnosti v jednom

Tento príklad predvádza, ako použiť skratku, kde si nastavíte všetky vlastnosti background v jednom.

Príklad

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Vyskúšajte si to »

Pri použití skratky - poradie hodnôt vlastností sú:

  • pozadie -farba
  • pozadie -obrázok
  • pozadie - opakovanie
  • pozadie - príloha
  • pozadie - pozícia

Nezáleží na tom, ak jedna z hodnôt chýba, rozhoduje to ak sú prítomné v tomto poradí.

Tento príklad používa pokročilejšiie CSS. Pozrite sa na príklad

Ďalšie príklady

Ako zafixovať statický obrázok na pozadí
Tento príklad ukazuje, ako nastaviť statický obrázok na pozadí. Obrázok sa neposúva so zvyškom stránky.

Vlastnosť Popis Hodnota CSS
background Sets all the background properties in one declaration background-color
background-image
background-repeat background-attachment background-position
inherit		 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
inherit		 1
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
inherit		 1
background-image Sets the background image for an element url(URL)
none
inherit		 1
background-position Sets the starting position of a background image left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit		 1
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
inherit		 1

 

« Predchádzajúca Ďalšia kapitola »