0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The background-position property controls the position of the background image. The property value consists of two parts separated by a space: x y.</p>
1
<p>The background-position property controls the position of the background image. The property value consists of two parts separated by a space: x y.</p>
2
<p>x assigns the horizontal and y the vertical position.</p>
2
<p>x assigns the horizontal and y the vertical position.</p>
3
<p>For the x value, you can use the keywords left, center, right, as well as percentage and pixel values.</p>
3
<p>For the x value, you can use the keywords left, center, right, as well as percentage and pixel values.</p>
4
<p>For the y value, you can use the keywords top, center, bottom, as well as percentage and pixel values.</p>
4
<p>For the y value, you can use the keywords top, center, bottom, as well as percentage and pixel values.</p>
5
<p>Here are some examples of how the property is used:</p>
5
<p>Here are some examples of how the property is used:</p>
6
background-position: 50% 50%; background-position: right bottom; background-position: 50px 100px; background-position: 0 100%; background-position: left bottom;<p>This is what the examples look like in practice:</p>
6
background-position: 50% 50%; background-position: right bottom; background-position: 50px 100px; background-position: 0 100%; background-position: left bottom;<p>This is what the examples look like in practice:</p>
7
<ol><li>The image will be centered;</li>
7
<ol><li>The image will be centered;</li>
8
<li>Bottom right corner;</li>
8
<li>Bottom right corner;</li>
9
<li>Padding of 50px from the left and 100px from the top;</li>
9
<li>Padding of 50px from the left and 100px from the top;</li>
10
<li>Bottom left corner;</li>
10
<li>Bottom left corner;</li>
11
<li>Bottom left corner.</li>
11
<li>Bottom left corner.</li>
12
</ol>
12
</ol>