CSS background-position property

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.

CSS background-position property

Syntax

Values

Example

Output

Subscribe

You might also like