CSS BACKGROUND-POSITION
The background-position property sets the starting position of a background image.
Inherited: No
Example
| body { background-image: url(stars.gif); background-repeat: no-repeat; background-position: top left } body |
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”. |
| 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%. |
| x-pos y-pos | 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. |
11 Responses
Cheers,
This one solved a problem.
Fats.
hi all CSS experts,
i want to change only vertical position of background image and remain the horizontal position i already set before.
how can i do it:
help asps
thanks
Nayana Adassuriya
Background positioning: I would like to position an image to a div starting from the bottom left corner (default, top left corner), and move this bg image some pixels top,. allways having the image positioned absolutely from the bottom left corner.
Is that possible? thank you so much.
Should be implemented in CCS3, although browsers don’t seem to respond yet.
http://www.w3.org/TR/css3-background/
“Background positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:
background-position: right 3em bottom 10px”
is there any difference between using “” and body{background-image:url(bk.gif)}?
Great example for CSS Backgroung position. Quite helpful for web designers.
Thank you.
people love to hate ie6, but the thing is, because its such a problematic browser, there are stacks of talented people coming up with workarounds, fixes, etc for it.
IE6 has 20% of browser users still. def worth paying attention to.
How to make Changes for a website CSS back ground position?
i need a design that can changes back ground theme.
can u suggest any new designs..
Clearly explained thanks..! :)
Really nice post, very helpful. Thank You
I’ve tried to use this on a website I am developing locally. Problem is, the position of the background is slightly different between Firefox and Chrome.