background-position-x häsusy
background-position-x häsusy
element fon suratynyň ýatay ýöndäki
ýerleşişini kesgitleýär.
Häsusy aşakdaky bahalary kabul edip biler:
left, center, right, şeýle hem
fonuň ýerleşişini göterim ýa-da
piksel bilen görkezmek mümkin.
Sintaksis
sahyjagöterijisi {
background-position-x: baha;
}
Mysal
Geliň, fon suratyny ýatay ýönde çepe ýerleşdireliň:
<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;
}
:
Mysal
Indi bolsa, fony saga göçüreliň:
<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;
}
:
Mysal
Geliň, fon suratyny merkeze ýerleşdireliň:
<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;
}
:
Mysal
Indi bolsa, fon üçin ýerleşişi göterim bilen görkezeliň:
<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;
}
:
Şeýle-de görüň
-
backgroundhäsusy,
fon üçin gysgaldyş häsusy hökmünde hyzmat edýär -
background-position-yhäsusy,
fonuň şekili ýöndäki pozisiýasyny kesgitleýär