The background-position CSS property is used to set the initial position of the background image.
Syntax
background-position:x-value y-value|value;
Values
| top bottom left right center | Sets the position as top, bottom, left, right and center respectively. If you specify only one value (ie, x), center will be set as the second value (y axis). |
| inherit | The background image will scroll with the element, not with the contents of the element. |
You can specify values in any of the following format:
| Keyword values |
| background-position: top; |
| background-position: top left; |
| background-position: center right; |
| background-position: top; |
| Percentage values |
| background-position: 10%; |
| background-position: 10% 15%; |
| Length values |
| background-position: 5cm; |
| background-position: 5cm 10cm; |
| background-position: 8mm 6mm; |
| Multiple values - If you use more than one background image. |
| background-position: 0 0, top; |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS text decoration</title>
<style>
body{
background-image: url('mimg1.jpg');
background-position: top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>Output
Note that the image is automatically centered when we specify only a single value (top in this example).
The CSS background shorthand property can be used to specify all other background properties in a single declaration.
