Уласцівасць background-position-x
Уласцівасць background-position-x
задае
месцазнаходжанне фонавага малюнка элемента
па гарызанталі.
Уласцівасць можа прымаць наступныя значэнні:
left
, center
, right
, а таксама
можна паказаць становішча фону ў працэнтах
ці пікселях.
Сінтаксіс
селектар {
background-position-x: значэнне;
}
Прыклад
Давайце размясцім фонавы малюнак злева па гарызанталі:
<div id="elem"></div>
#elem {
background-position-x: left;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Прыклад
А цяпер давайце перамясцім фон управа:
<div id="elem"></div>
#elem {
background-position-x: 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-x: 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-x: 20%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Глядзіце таксама
-
уласцівасць
background
,
якая з'яўляецца ўласцівасцю-скарачэннем для фону -
уласцівасць
background-position-y
,
якая задае пазіцыю фону па вертыкалі