CSS background-position Property

The CSS background-position property specifies 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 of the background-position property:

<!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>

Try it Yourself »

Result

Example of the background-position property specified in percentage:

<!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>

Try it Yourself »

Example of the background-position property in pixels:

<!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-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>

Try it Yourself »

Example of the background-position property with the "right 100px" value:

<!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: right 100px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned to the right and 100px down from the top.</p>
  </body>
</html>

Try it Yourself »

Example of the background-position property with the "center center" value :

<!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-attachment: fixed;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned center.</p>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
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".	Play it »
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.	Play it »
xpos, ypos	The first value sets the horizontal position when the second value sets the vertical. Units can be pixels (0px 0px).	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.