background-position
Specifies the starting position of the background image set with the background-image property.
Syntax
background-position: value;
The background-position property has two values, the horizontal position (maybe left, center, right) and the vertical position (maybe top, center, bottom). In addition to using keywords, position can also be specified in percentages, pixels, or other units. If keywords are used, then the order of their occurrence does not matter, with percentage notation, the horizontal position of the picture is first set, and then, after a space, the vertical position. The relationship between the keywords used and the percentage entry is as follows.
The brackets indicate where the background image is located relative to the container.
The background-position property requires two values: a horizontal offset (first value) and a vertical offset (second value). If only one value is specified, it is used for the horizontal offset, and the default vertical offset is 50%.
top left = left top = 0% 0% (top left)
top = top center = center top = 50% 0% (center top)
right top = top right = 100% 0% (top right corner)
left = left center = center left = 0% 50% (left and center)
center = center center = 50% 50% (centered)
right = right center = center right = 100% 50% (right and center)
bottom left = left bottom = 0% 100% (bottom left)
bottom = bottom center = center bottom = 50% 100% (centered at the bottom)
bottom right = right bottom = 100% 100% (bottom right corner)
With inherit, the value is inherited from the element's parent.
Visual presentation
All possible options for background-position:
Example
By default, the background image will repeat indefinitely vertically and horizontally, filling the entire space for the image, unless otherwise specified. The background-repeat property helps to eliminate this, we will set the value to not repeat.
<!-- create a block and specify a link to its properties -->
<div class="abcd"></div>
/* CSS styles */
.abcd {
border:1px solid red; /*create a solid border and highlight with color*/
height:100%; /*set block height*/
background: url("img/example.png"); /*image link*/
background-repeat: no-repeat;
background-position: left; /*image location*/
}
