CSS background-position property
CSS

CSS background-position property

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

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).
inheritThe 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.