CSS background-position Property
 Complete CSS Reference
Definition
The background-position property sets the starting position of a background image.
Inherited: No
Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".
JavaScript Syntax
CSS properties can also be dynamically changed with a JavaScript.
Scripting Syntax: object.style.backgroundPosition="bottom
center"
In our HTML DOM tutorial you can find more details about the
backgroundPosition property.
In our HTML DOM tutorial you can also find a full
Style Object Reference.
Example
|
body
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top left
}
body
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 0% 0%
}
|
Possible 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: 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. |
Try-It-Yourself Demos
How to place the
background image
This example demonstrates how to place the 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.
Complete CSS Reference
 |
|
|
See why there are 20,000+ Ektron integrations worldwide.
Request an INSTANT DEMO or download a FREE TRIAL today. |
|
|
|
HOME
Printer friendly page
