CSS background-position Property

Definition and Usage

background-position Property sets the starting position of the background image.

This property sets the original background image (by background-image The position of the (definition) where, if the background image is to be repeated, it will start from this point.

Tip:You need to set the background-attachment property to "fixedIn order to ensure that the property works normally in Firefox and Opera.

See also:

CSS Tutorial:CSS Background

CSS Reference Manual:background-image Property

HTML DOM Reference Manual:backgroundPosition Property

Examples

How to position background images:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Try It Yourself

CSS Syntax

background-position: value;

Property Value

Value Description
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

If you specify only a keyword, the second value will be "center".

Default Value: 0% 0%.
x% y%

The first value is the horizontal position, and the second value is the vertical position.

The top left corner is 0% 0%. The bottom right corner is 100% 100%.

If you specify only one value, the other value will be 50%.
xpos ypos

The first value is the horizontal position, and the second value is the vertical position.

The top left corner is 0 0. The unit is pixels (0px 0px) or any other CSS unit.

If you specify only one value, the other value will be 50%.

You can mix % and position values.

Technical Details

Default Value: 0% 0%
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.backgroundPosition="center"

More Examples

How to position a background image using %
This example demonstrates how to position a background image on a webpage using percentages.
How to position a background image using pixels
This example demonstrates how to position a background image on a webpage using pixels.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5