Background-position

We use the background-position property for the position of a background image.

By default a background-position is placed at the top-left corner of an element and repeated both vertically and horizontally.

The background-position property has the following values:

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

We can position a background-image using percent or pixels.

CSS Syntax

background-position: value;

Let's see an example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
        background-repeat: no-repeat;
        background-position: right top;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading as an example.</h2>
    <p>Some paragraph as an example.</p>
  </body>
</html>

Here is the result:



As you can see in the result, our image is on the right side and not repeated.

The image isn't repeated, because we used "background-repeat" property with the "no-repeat" value.

The image is in the right side, because we have used "background-position" property with the "right top" value.

Let's see another example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 300px;
        border: 1px solid #a7a7a7;
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
        background-repeat: no-repeat;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>This is some heading as an example.</h2>
      <p>Some paragraph as an example.</p>
    </div>
  </body>
</html>

Here is the result:



As you see in the result, our image is in the center and not repeated.

The image isn't repeated, because we have used "background-repeat" property with the "no-repeat" value.

The image is in the right side, because we have used "background-position" property with the "center center" value.

Let's see an example when we use pixsels.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 300px;
        border: 1px solid #a7a7a7;
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
        background-repeat: no-repeat;
        background-position: 50px 5px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>This is some heading as an example.</h2>
      <p>Some paragraph as an example.</p>
    </div>
  </body>
</html>

Here is the result:



As you see in the code above, we have used "background-position" property with the "50px 5px" value.

The first value (50px) is the horizontal position and the second value (5px) is the vertical.

The same we can do with the percents.

The first value will be the horizontal position and the second value will be the vertical.

Let's see an example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 300px;
        border: 1px solid #a7a7a7;
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
        background-repeat: no-repeat;
        background-position: 10% 2%;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>This is some heading as an example.</h2>
      <p>Some paragraph as an example.</p>
    </div>
  </body>
</html>

Here is the result:

Property Values

Value Description
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Specified position of background image.
xpx ypx The first value is the horizontal position and the second value is the vertical, where we use pixcels.
x% y% The first value is the horizontal position and the second value is the vertical, where we use percents.
initial It makes the property use its default value.
inherit It inherits the property from its parent element.