X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS background-position Property

CSS background-position property specifies where should be the starting position of a background-image.

If the default value is set, a background-position will be placed at the top-left corner of an element. And if you set the background to be repeated, it will be repeated both vertically and horizontally.

Initial Value 0% 0%
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited No.
Animatable Yes. The position can be changed.
Version CSS1
DOM Syntax object.style.backgroundPosition = "center";

Syntax

background-position: value;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body { 
      padding: 102px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: left top; 
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned at the left-top corner of the element.</p>
  </body>
</html>

Result

In this example you can see how to set background-position by using %s.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body { 
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 15%; 
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned 50% from the left side and 15% from the top side of the element.</p>
  </body>
</html>

Result

Here see how to set background-position by using pixels.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body { 
      padding: 100px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 5px 50px; 
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned 5px from the left, and 50px down from the top.</p>
  </body>
</html>

Values

Value Description
left
right top
top
bottom
center
Sets the position of the background-image. In the case we set only one value, the other will be "center".
x% y% The first value sets the horizontal position when the second value sets the vertical. 0% 0% is the top left corner. The 100% 100% is the right bottom corner. If only set one value, the other value will be 50%. The 0% 0% is the default value.
xpos, ypos The first value sets the horizontal position when the second value sets the vertical. Units can be pixels (0px 0px).
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

CSS background-position property specifies where should be the starting position of a



Do you find this helpful?

Related articles