CSS background-position-x Property

The background-position-x property sets the horizontal position for each background. One or more values can be specified separated by commas.

By default, a background-image is positioned at the element’s top-left corner and repeated both horizontally and vertically.

Negative values are valid.

Initial Value left
Applies to All elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.backgroundPositionX = "right";

Syntax

background-position-x: left | center | right | length | percentage | initial | inherit;

Example of the background-position-x property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: 70%; 
      }
    </style>
  </head>
  <body>
    <h2>Background-position-x property example</h2>
  </body>
</html>

Result

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
      background-position-x: center; 
      }
    </style>
  </head>
  <body>
    <h2>Background-position-x property example</h2>
  </body>
</html>

Example of the background-position-x property with the "left" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: left; 
      }
    </style>
  </head>
  <body>
    <h2>Background-position-x property example</h2>
  </body>
</html>

Example of the background-position-x property with the "length" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      body { 
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-attachment: fixed; 
      background-position-x: 30px; 
      } 
    </style>
  </head>
  <body>
  </body>
</html>

Values

Value Description
left Specifies the alignment of the left edge of the background image with the left edge of the background position layer.
center Specifies the alignment of the center of the background image with the center of the background position layer.
right Specifies the alignment of the right edge of the background image with the right edge of the background position layer.
length Specifies the offset of the given background image's left vertical edge from the background position layer's left vertical edge.
percentage Specifies the offset of the background image's horizontal position relative to the container. 0% aligns the left edge of the background image with the left edge of the container, and 100% aligns the right edge of the background image with the right edge of the container, and 50% horizontally centers the background image.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

4.0+ 12.0+ 49.0+ 3.1+ 15.0+

Practice Your Knowledge

CSS background-position-x property can have the following values, except



Do you find this helpful?

Related articles