CSS background-position Property
 Complete CSS Reference
Example
How to position a background-image:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
} |
Try it yourself »
|
Definition and Usage
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" |
Browser Support
The background-position property is supported in all major browsers.
Note: No versions of Internet Explorer (including IE8) support the property value "inherit".
Property Values
| 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.
Related Pages
CSS tutorial: CSS Background
CSS reference: background-image property
HTML DOM reference:
backgroundPosition property
Complete CSS Reference
The Altova MissionKit is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet designer;
DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
| 
