In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > background-position

background-position property

Browser support:

Sets the position of the background-image within the element.

JavaScript page for this property: backgroundPosition. You can find other example(s) there.

Possible values:

One of the following values:

•

Values in this order (use the space character to separate them):

horizontal position

One of the following values:

•	<horizontal position in length>
•	horizontal position in percentage
•	left
•	center
•	right

vertical position

One of the following values:

•	<vertical position in length>
•	vertical position in percentage
•	top
•	center
•	bottom

possible but not necessary; left to personal choice

•

Any of the following values (use the space character to separate them, each value can be used only once):

•

horizontal position

One of the following values:

•	left
•	center
•	right

•

vertical position

One of the following values:

•	top
•	center
•	bottom

•

inherit

Description of values:

bottom

Background is aligned to the bottom.

center

Background is centered.

horizontal position in length

The horizontal position of the background in length units. For the supported length units, see the length page.

horizontal position in percentage

The horizontal position is the specified percentage of the width of the object.

inherit

Takes the value of this property from the computed style of the parent element.

left

Background is aligned to the left.

right

Background is aligned to the right.

top

Background is aligned to the top.

vertical position in length

The vertical position of the background in length units. For the supported length units, see the length page.

vertical position in percentage

The vertical position is the specified percentage of the height of the object.

Default: 0% 0%.

If only one value is set and it can be a horizontal position, the vertical position is set to 50%. If the only value cannot be a horizontal position, the horizontal position is set to 50%.

Example HTML code 1:

This example illustrates the use of the background-position property:

<head>
    <style>
        .example {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            width: 200px;
            height: 200px;
            border:1px solid #CCCCCC;
        }

        .centerTop {
            background-position: center top;
        }

        .leftBottom {
            background-position: left bottom;
        }
    </style>
</head>
<body>
    <div class="example centerTop" style=" float:right;">
        The image is at the center top of this division. 
    </div>

    <div class="example leftBottom">
        The image is at the left bottom of this division. 
    </div>
</body>