background-position

S to lastnostjo določimo začetno pozicijo slike za ozadje. To lahko storimo na več načinov. Lahko uporabimo vrednosti, ki že sami po sebi določajo začetno pozicijo slike. To lastnost lahko uporabimo le na elementih, kot so p, h1, div, pre in pa na nadomestnih elementih. (Nadomestni elementi so samo znotraj kode HTML. Ti elementi so img, input, textarea, select, in object.)

Ta lastnost določa položaj osnovne slike v ozadju. Glede na to sliko tlakuje preostanek ozadja, če je to potrebno (odvisno od nastavitve lastnosti background-repeat).

Položaj slike nastavimo z eno vrednostjo ali z dvema vrednostma. V primeru uporabe dveh vrednosti, morata biti obe iste vrste (ni dovoljeno kombinirati npr. dolžinske mere in odstotkov)

vrednost	opis	NN	IE	CSS
odstotki odstotki	Z vrednostnim parom `0% 0%`, se zgornji levi kot slike poravna na zgornji levi kot izbranega prostora. Z vrednostnim parom `100% 100%` se spodnji desni kot slike poravna na spodnji desni kot izbranega prostora. Z vrednostma `15% 85%`, se slika poravna 15% v desno in 85% navzdol v izbranem prostoru.	6	4	1
dolžina dolžina	Slika se bo postavila tako, da bo levi rob slike odmaknjen od levega roba ozadja za x. Podobno velja za navpično smer. Zgornji rob slike bo od zgornjega roba ozadja odmaknjen za y.	6	4	1
ključni besedi	Deluje podobno kot odstokovne vrednosti, le da namesto številskih vrednosti napišemo besede. Za vodoravni položaj lahko uporabimo besede `left`, `center`, `right`, za navpični položaj pa `top`, `center`, `bottom`. Pri uporabi ključnih besed vrstni red ni pomemben, če navedemo eno samo ključno besedo, je vrednost druge nastavljena na `center`.	6	4	1

Primeri

body { background-image: url(slika.gif); background-position: right top }
body { background-image: url(slika.gif); background-position: top center }
body { background-image: url(slika.gif); background-position: center }
p    { background-image: url(slika.gif); background-position: bottom }

→ Lega ozadja je podana s ključnima besedama
→ Lega ozadja je podana z merami
→ Lega ozadja in ponavljanje v smeri x

Gor e-gradiva CSS primeri background-attachment outline

SERŠ Maribor : Strokovna gimnazija : 2004 : Tine Horvat

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri