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): 
1.
horizontal position
 One of the following values: 
<horizontal position in length>
horizontal position in percentage
left
center
right
2.
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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content