Својство background-position
Својството background-position го одредува
местоположението на позадинската слика на елементот.
Местоположението може да се одредува со помош на какви
единици
за димензии. Првата вредност означува
оддалечување од лево, втората - оддалечување од горе.
Може исто така да се одреди положбата со клучни
зборови. Во овој случај редоследот на вредностите не
е важен. Клучни зборови за вертикалата: top,
center, bottom. Клучни зборови за хоризонталата:
left, center, right.
Како да се користат клучните зборови
За да се постави сликата со клучен збор,
треба да се наведе една вредност за вертикалата
и една за хоризонталата. На пример, ако се наведе
вредноста top right, тогаш сликата ќе биде
горе десно.
Редоследот на зборовите не е важен: може да се напише top right,
а може - right top. Ако
има клучен збор center - може да се испушти.
На пример, top center, е исто што
и само top. А center center
е исто што и само center.
Синтакса
селектор {
background-position: две вредности преку празно место;
}
Пример
Стандардно позадинската слика ќе биде во горниот лев агол:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика во горниот десен агол:
<div id="elem"></div>
#elem {
background-position: top right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика во долниот десен агол:
<div id="elem"></div>
#elem {
background-position: bottom right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика десно и по средина по вертикала:
<div id="elem"></div>
#elem {
background-position: right center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика по средина на блокот:
<div id="elem"></div>
#elem {
background-position: center center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика на растојание
20px од лево и 40px од горе:
<div id="elem"></div>
#elem {
background-position: 20px 40px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика на растојание
90% од лево и 100% од горе:
<div id="elem"></div>
#elem {
background-position: 90% 100%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика на растојание
30px од лево и од долу по вертикала:
<div id="elem"></div>
#elem {
background-position: 30px bottom;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика на растојание
30px од лево и по средина по вертикала:
<div id="elem"></div>
#elem {
background-position: 30px center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Ајде да ја поставиме позадинската слика на растојание
30px од горе и по средина по хоризонтала:
<div id="elem"></div>
#elem {
background-position: center 30px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Погледнете исто така
-
својството
background,
кое претставува скратено својство за позадината