CSS - background-position-x Property

Quiz

CSS 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.

Syntax

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

Property Values

Value	Description
left	Sets the image to the left position.
center	Sets the image at the horizontal center position.
right	Sets the image to the right position.
length	Sets the image at the horizontal position with the given length.
percentage	Sets the image at the horizontal position in terms of the percentage height.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Position X

Below are described some examples of background-position-x property with different values.

Left Position of Image

To set the position of the image to left, we use the left value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

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

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

Right Position of Image

To set the position of the image to right, we use the right value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

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

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

Center Position of Image

To set the position of the image to center, we use the center value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

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

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

Position of Image with Length

To position an image using length, we specify the value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

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

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

Position of Image with Percentage

To position an image along the X direction, we can also use percentage value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .position-x-left {
            background-image: url('/css/images/tutimg.png');
            background-position-x: 80%;
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
            border: 3px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

Supported Browsers

Property
background-position-x	1.0	12.0	49.0	1.0	15.0

css_reference.htm

Print Page