CSS background-position Property
Example
How to position the background image:
Tag Definition and Usage
The background-position property sets the starting position of the background image.
Note: For this to work in Firefox and Opera, background-attachment must be set to "fixed".
| Default value: | 0% 0% |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS1 |
| --- | --- |
| JavaScript syntax: | object.style.backgroundPosition="center" |
| --- | --- |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 and earlier versions do not support multiple background images on one element.
Property Values
| Value | Description |
|---|---|
| left top <br>left center <br>left bottom <br>right top <br>right center <br>right bottom <br>center top <br>center center <br>center bottom | If only one keyword is specified, the other value will be "center" |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The bottom right corner is 100% 100%. If only one value is specified, the other value will be 50%. The default value is: 0% 0% |
| xpos ypos | The first value is the horizontal position, and the second value is the vertical. The top left corner is 0. Units can be pixels (0px 0px) or any other CSS unit |
| inherit | Specifies that the background-position property should be inherited from the parent element |
Online Examples
How to set the page background image
How to position the background image using %
How to position the background image using pixels
Related Articles
CSS Tutorial: CSS Background
CSS Reference: background-image Property