CSS - background-position-x Property

The background-position-x property sets the initial horizontal position of the element's background image. The position of the image is relative to the value set by background-origin property.

The value of background-position-x gets overridden if background or background-position declarations are made on the element after it.

Possible Values

The value for this property can be specified as one or more values, separated by commas.

  • left: Left edge of the background image is aligned with the left edge of background position layer.

  • center: Center of the background image is aligned with the center of the background position layer.

  • right: Right edge of the background image is aligned with the right edge of background position layer.

  • <length>: It is the offset of the left vertical edge of background image from the background position layer's left vertical edge.

  • <percentage>: It is the offset of the horizontal position of the background image relative to the containing element.

    • 0%: left edge of the background image is aligned with left edge of the container.

    • 100%: right edge of the background image is aligned with right edge of the container.

    • 50%: horizontally centered background image.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundPositionX = "left 50px";

CSS background-position-x - left Value

Here is an example where the image is positioned horizontally on the left:

<html>
<head>
<style>  
   .position-x-left {
      background-image: url('images/tutimg.png');
      background-position-x: left;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-left"></div>
</body>
</html>

CSS background-position-x - right Value

Here is an example where the image is positioned horizontally on the right:

<html>
<head>
<style>  
   .position-x-right {
      background-image: url('images/tutimg.png');
      background-position-x: right;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-right"></div>
</body>
</html>

CSS background-position-x - center Value

Here is an example where the image is positioned horizontally at center:

<html>
<head>
<style>  
   .position-x-center {
      background-image: url('images/tutimg.png');
      background-position-x: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-center"></div>
</body>
</html>

CSS background-position-x - <length> Value

Here is an example where the image is positioned horizontally using a length value:

<html>
<head>
<style>  
   .position-x-length {
      background-image: url('images/tutimg.png');
      background-position-x: 300px;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-length"></div>
</body>
</html>

CSS background-position-x - <percentage> Value

Here is an example where the image is positioned horizontally using a percentage value:

<html>
<head>
<style>  
   .position-x-percent {
      background-image: url('images/tutimg.png');
      background-position-x: 80%;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
      <div class="position-x-percent"></div>
</body>
</html>
Advertisements