W3docs
en
Log in

CSS background-position-x Property

The background-position-x CSS property specifies the horizontal position of a background-image. See the Syntax and practice with examples.

The background-position-x property sets the horizontal position of a background image layer. 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.

Note

In modern CSS, it is recommended to use the background-position shorthand property instead, as background-position-x is rarely used in isolation.

Info

Negative values are valid.

Initial Valueleft
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.backgroundPositionX = "right";

Syntax

CSS background-position-x values

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

Example of the background-position-x property:

CSS background-position-x code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc url("/build/images/w3docs-logo-black.png") repeat-y;
        background-position-x: 70%;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-x property example</h2>
  </body>
</html>
Try it Yourself »

Result

CSS background-position-x center

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

CSS background-position-x center example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc url("/build/images/w3docs-logo-black.png") repeat-x;
        background-position-x: center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-x property example</h2>
  </body>
</html>
Try it Yourself »

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

CSS background-position-x left example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc url("/build/images/w3docs-logo-black.png") repeat-y;
        background-position-x: left;
      }
    </style>
  </head>
  <body>
    <h2>Background-position-x property example</h2>
  </body>
</html>
Try it Yourself »

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("/build/images/w3docs-logo-black.png") repeat-y;
        background-position-x: 30px;
      }
    </style>
  </head>
  <body>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
leftSpecifies the alignment of the left edge of the background image with the left edge of the background position layer.
centerSpecifies the alignment of the center of the background image with the center of the background position layer.
rightSpecifies the alignment of the right edge of the background image with the right edge of the background position layer.
lengthSpecifies the offset of the given background image's left vertical edge from the background position layer's left vertical edge.
percentageSpecifies 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.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What is the function of the CSS background-position-x property?