scheduling table

CSS Reference Manual

CSS attribute

Elective Courses

Course Recommendation:

CodeW3C.com Treasure Box

CSS background-position-x Property

Previous page background-position
Next Page background-position-y

Definition and Usage

background-position-x Property sets the position of the background image on the x-axis.

Tip:By default, the background image is placed at the top left corner of the element and repeated vertically and horizontally.

Instance

Example 1

How to position the background image on the x-axis:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

Try it yourself

Example 2

How to position the background image to the right:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Try it yourself

Example 3

How to use percentage positioning for background images:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

Try it yourself

Example 4

How to use pixel positioning for background images:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Try it yourself

Example 5

Create a background image that covers its container using different background properties:

.hero-image {
  background-image: url("photographer.jpg"); /* Used image */
  background-color: #cccccc; /* Use this color if the image is not available */
  height: 300px; /* Must set the height */
  background-position-x: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Adjust the size of the background image to cover the entire container */
}

Try it yourself

CSS Syntax

background-position-x: value;

Attribute value

Value	Description
left	Aligns the background position at the left of the x-axis.
right	Aligns the background position at the right of the x-axis.
center	Aligns the background position at the center of the x-axis.
x%	The left of the x-axis is 0%, and the right is 100%. Percentage values refer to the width of the background positioning area minus the width of the background image.
xpos	The horizontal distance from the left. The unit can be pixels (such as 0px) or others CSS Units.
xpos offset	Dual-value syntax, supported only in Firefox and Safari. xpos Set to left or right offset Is the horizontal distance from the left or right of the background image The unit can be pixels or others CSS Units.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	0%
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.backgroundPositionX="center"