CSS - Pozadie a farby

Je samozrejmé, že CSS obsahuje viac možností pre prácu s farbami a pozadím internetových stránok ako HTML.

Farba textu

Určuje farbu písmen (nie ich pozadia). Hodnotou je zápis farby.

.modre {color: blue}
div {color: #0000FF}

Farba pozadia

Tentoraz sa určuje farba pozadia nejakého elementu (body, span, tabuľka - table,...). Ako hodnotu zadávame farbu alebo TRANSPARENT (priehľadné, s pôvodnou farbou).

body {background-color: #1A2B3C}
.normalne {background-color: transparent}
.text {background-color: aqua}

Obrázok na pozadí

V pozadí elementu môže byť aj obrázok. Hodnotou vlastnosti je CSS zápis URL. Element bez obrázkového pozadia má predvolenú hodnotu none.

body {background-image: url('pozadie.png')}
.bodky {background-image: url("bodka.gif")}

Opakovanie pozadia

Táto vlastnosť má význam, len ak je obrázok menší ako element. Pri neuvedení tejto vlastnosti sa obrázkové pozadie bude opakovať, aby sa rozkladalo po celej ploche elementu (hodnota repeat). Ak sa má opakovať vo vodorovnom smere, použijeme hodnotu repeat-x, ak v horizontálnom, repeat-y. Pokiaľ chceme zobraziť obrázok bez opakovania, hodnotou bude no-repeat.

a {
 background-image: url('bodka.png');
 background-repeat: repeat-x;
}

Pripevnenie pozadia

Obrázok na pozadí stránky sa s ňou zvyčajne pohybuje (hodnota scroll). Dá sa však dosiahnuť, aby bolo pevne na tej istej pozícii aj pri scrollovaní. Nastavíme tejto vlastnosti hodnotu fixed. Odporúčam vyskúšať, je to zaujímavé, ale veľký praktický význam v tom nevidím.

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

Pozícia pozadia

Udáva pozíciu obrázka v pozadí elementu na osi Y (zvisle) a X (vodorovne). Hodnotou je vzdialenosť od vrchu (top, center, bottom, dĺžka alebo percentá) + medzera + vzdialenosť od ľavého okraja (left, center, right, dĺžka alebo percentá).

div {
 background-image: url('bodka.png');
 background-repeat: no-repeat;
 background-position: top right;
}
#vlavo-dole {
 background-image: url('bodka.png');
 background-repeat: no-repeat;
 background-position: 100% 0%;
}

Súhrn

Všetky vlastnosti pozadia môžeme zapísať do jedinej vlastnosti. Tá má tvar:

nejaký-element {
 background: farba-pozadia obrázok-na-pozadí
 opakovanie-pozadia pripevnenie-pozadia
 pozícia-pozadia
}

Samozrejme, nemusia sa vždy uviesť všetky možnosti. Uvediem príklad.

body {background: url(b.jpg) no-repeat fixed}