Za pomocą właściwości background-position-x oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić względem lewej krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.
background-position-x:100px;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 100 pikseli na prawo od lewej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "100px"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
background-repeat:no-repeat;
background-position-x:100px;
border:15px solid rgba(0, 0, 0, 0.3);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 100 pikseli na prawo od lewej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "100px"
</div>
</body>
</html>
Za pomocą wartości left właściwości background-position-x możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się przy lewej krawędzi obszaru pozycjonowania.
background-position-x:left;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy lewej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "left"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
background-repeat:no-repeat;
background-position-x:left;
border:15px solid rgba(0, 0, 0, 0.3);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy lewej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "left"
</div>
</body>
</html>
Za pomocą wartości center właściwości background-position-x możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się na środku, względem lewej oraz prawej krawędzi obszaru pozycjonowania.
background-position-x:center;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się na środku, względem lewej oraz prawej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "center"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
background-repeat:no-repeat;
background-position-x:center;
border:15px solid rgba(0, 0, 0, 0.3);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się na środku, względem lewej oraz prawej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "center"
</div>
</body>
</html>
Za pomocą wartości right właściwości background-position-x możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się przy prawej krawędzi obszaru pozycjonowania, która jest krawędzią przeciwną do lewej krawędzi obszaru pozycjonowania.
background-position-x:right;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "right"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
background-repeat:no-repeat;
background-position-x:right;
border:15px solid rgba(0, 0, 0, 0.3);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej krawędzi obszaru pozycjonowania obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z wartością "right"
</div>
</body>
</html>
Jeżeli zdecydowaliśmy się na to, aby tło interesującego nas elementu HTML składało się z kilku obrazków jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości background-position-x możemy określić względem lewej krawędzi obszaru pozycjonowania osobną pozycję początkową dla poszczególnych obrazków tworzących tło obrazkowe interesującego nas elementu HTML.
Podana przez nas sekwencja wartości właściwości "background-position-x" nie może zawierać wartości globalnych.
Jeżeli podana przez nas sekwencja wartości właściwości "background-position-x" będzie zawierała mniejszą liczbę wartości niż liczba obrazków tworzących tło obrazkowe elementu HTML, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "background-position-x" tak, aby uzyskać wystarczającą liczbę wartości.
background-position-x:right, 75px;
pozycja początkowa pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej krawędzi obszaru pozycjonowania pierwszego obrazka tworzącego tło obrazkowe tego elementu "div", natomiast pozycja początkowa drugiego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 75 pikseli na prawo od lewej krawędzi obszaru pozycjonowania drugiego obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z następującą sekwencją wartości: "right, 75px"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
background-image:url(https://webkod.pl/files/css/obrazek-o1.png), url(https://webkod.pl/files/css/obrazek-o2.png);
background-repeat:no-repeat, no-repeat;
background-position-x:right, 75px;
border:15px solid rgba(0, 0, 0, 0.3);
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
pozycja początkowa pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy prawej krawędzi obszaru pozycjonowania pierwszego obrazka tworzącego tło obrazkowe tego elementu "div", natomiast pozycja początkowa drugiego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 75 pikseli na prawo od lewej krawędzi obszaru pozycjonowania drugiego obrazka tworzącego tło obrazkowe tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position-x" wraz z następującą sekwencją wartości: "right, 75px"
</div>
</body>
</html>
