Za pomocą właściwości background-position-y oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić względem górnej krawędzi obszaru pozycjonowania pozycję początkową obrazka tworzącego tło obrazkowe interesującego nas elementu HTML.
background-position-y:120px;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się 120 pikseli w dół od górnej 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-y" wraz z wartością "120px"
<!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-y:120px;
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ę 120 pikseli w dół od górnej 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-y" wraz z wartością "120px"
</div>
</body>
</html>
Za pomocą wartości top właściwości background-position-y możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się przy górnej krawędzi obszaru pozycjonowania.
background-position-y:top;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy górnej 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-y" wraz z wartością "top"
<!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-y:top;
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 górnej 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-y" wraz z wartością "top"
</div>
</body>
</html>
Za pomocą wartości center właściwości background-position-y możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się na środku, względem górnej oraz dolnej krawędzi obszaru pozycjonowania.
background-position-y:center;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się na środku, względem górnej oraz dolnej 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-y" 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-y: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 górnej oraz dolnej 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-y" wraz z wartością "center"
</div>
</body>
</html>
Za pomocą wartości bottom właściwości background-position-y możemy sprawić, że obrazek tworzący tło obrazkowe interesującego nas elementu HTML znajdzie się przy dolnej krawędzi obszaru pozycjonowania, która jest krawędzią przeciwną do górnej krawędzi obszaru pozycjonowania.
background-position-y:bottom;
pozycja początkowa obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy dolnej 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-y" wraz z wartością "bottom"
<!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-y:bottom;
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 dolnej 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-y" wraz z wartością "bottom"
</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-y możemy określić względem górnej 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-y" nie może zawierać wartości globalnych.
Jeżeli podana przez nas sekwencja wartości właściwości "background-position-y" 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-y" tak, aby uzyskać wystarczającą liczbę wartości.
background-position-y:bottom, 25px;
pozycja początkowa pierwszego obrazka tworzącego tło obrazkowe tego elementu "div" znajduje się przy dolnej 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ę 25 pikseli w dół od górnej 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-y" wraz z następującą sekwencją wartości "bottom, 25px"
<!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-y:bottom, 25px;
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 dolnej 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ę 25 pikseli w dół od górnej 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-y" wraz z następującą sekwencją wartości "bottom, 25px"
</div>
</body>
</html>
