Background

U 6 primjera naučite kako namjestiti da se pozadina ponavlja okomito, a kako vodoravno. Naučite kako pozadinu smjestiti na određeno mjesto na pozadini, kako dodati boju...

Primjer 1.

Ako body tagu dodamo slijedeći stil

…pozadinska slika će se prikazati u izvornoj veličini te će se ponavljati vodoravno i horizontalno.

Primjer 2. – ponavljanje pozadine vodoravno

Pozadinska slika će se ponavljati samo vodoravno.

Primjer 3. – ponavljanje pozadine okomito

Pozadinska slika će se ponavljati samo okomito. U ovome primjeru pozadina je pomaknuta na sredinu objekta (top center - gore sredina).

Primjer 4. – Pozadina pomaknuta u raznim kutevima

top right - gore desno; bottom right - dolje desno; top left - gore lijevo; bottom left - dolje lijevo

Primjer 5. – dodavanje boje ispod slike

Ukoliko koristite prozirnu sliku kao ja u ovome primjeru, možete dodati i određenu boju ispod slike.
#FF0000 predstavlja crvenu boju.

Primjer 6. – promjena veličine pozadinske slike

Ukoliko background-size namjestite na 100%, slika će se razvući preko cijele pozadine.

Primjer 7. – pomicanje pozadinske slike

Naučite kako pomicati sliku na pozadini na točno određeno mjesto:

50px udesno i 20px od gore. U slučaju pomicanja pozadniske slike vrijede atributi y a zatim x, odnosno horizontalno a zatim vertikalno pomicanje.



Ukoliko dodate minus (-) ispred broja, slika će se pomaknuti u suprotnome smjeru.