background-position

div.test { background-position: center;}
div.test1 { background-position: left bottom;}
div.test2 { background-position: 50px 100px;}

Value	Description
Length value	Specifies the position numerically. Accepts units like % and px. Negative values are allowed. The default is 0% 0%.
left	Equivalent to horizontal position 0%.
right	Equivalent to horizontal position 100%.
top	Equivalent to vertical position 0%.
bottom	Equivalent to vertical position 100%.
center	Equivalent to horizontal position 50% and vertical position 50%.

※ The background image below is used in the samples. Background tiling is disabled for clarity.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: left top;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: center;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: center bottom;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: right bottom;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

※ Version data is based on MDN.

The background-position property sets the starting position for the background image. When tiling is enabled, the image repeats from the specified position.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-position: center bottom;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

Note that the position is relative to the origin set by the background-origin property, not the background image itself.

This property accepts one or two values. The first value sets the horizontal position from the left, and the second sets the vertical position.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: 20% 30%;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

If only one horizontal value is specified, the vertical value defaults to center.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: left;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

If only a vertical keyword (top or bottom) is specified, the horizontal value defaults to center. However, this is not officially documented behavior, so it is safer to specify both values explicitly, such as center top.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: top;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: bottom;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

By controlling background-position to show only a portion of an image, you can create the effect of swapping images using a single image file. This technique is known as CSS Sprites, and it reduces the number of image requests, improving page load performance.

The image used in the sample below:

<style>
    div { width: 100px; height: 100px; margin: 0 auto; background-image: url(/dics/dictionary-css/img/sample_bg2.png); background-position: left top;}
    div:hover { background-position: left bottom;}
</style>
<div></div>