From http://www.w3schools.com (Copyright Refsnes Data)
ExampleHow to position a background-image:
Try it yourself » |
The background-position property sets the starting position of a background image.
Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".
| Default value: | 0% 0% |
|---|---|
| Inherited: | no |
| Version: | CSS1 |
| JavaScript syntax: | object.style.backgroundPosition="center" |
![]()
The background-position property is supported in all major browsers.
Note: No versions of Internet Explorer (including IE8) support the property value "inherit".
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the second value will be "center". Default value is: 0% 0% |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
| inherit | Specifies that the setting of the background-position property should be inherited from the parent element |
Try it Yourself - Examples |
How to place a background image
This example demonstrates how to place a background-image on the page.
How to position a background image using %
This example demonstrates how to position an image on the page using percent.
How to position a background image using pixels
This example demonstrates how to position an image on the page using pixels.
CSS tutorial: CSS Background
CSS reference: background-image property
HTML DOM reference: backgroundPosition property
Complete CSS Reference
From http://www.w3schools.com (Copyright Refsnes Data)