> Hello, all. I am creating a Zen Cart for my store and have put an image
> in the background of my pages. The webpage is found here:
> http://www.possets.com/zen-cart and the CSS can be found here.
> In some browsers, the image looks great. In other browsers the
> background images are drifting up too high and show the bottom being cut
> off and it's unattractive. I want to be
> able to position the image in the background and have it look good in
> IE6, 5.5, and 5 at least, so the image bottom sits on or below the
> bottom of the page.
background:#FFFFFF url(../images/possetsgirl800w.jpg) no-repeat fixed
background:#FFFFFF url(../images/possetsgirl800w.jpg) no-repeat fixed 0
This will fix the background to the bottom of the viewport, which might
be below the bottom of the page at higher resolutions. When you use
fixed units like pixels, the top left of the image is put at that point
in the containing box, which is basically the viewport in your case.
But if you use percentages, a point in the image at the specified
percentages is matched to the same point in the containing box. So, for
example, if you specify "10% 20%" as the percentages, a point 10% across
and 20% down in the image is matched to the point 10% across and 20%
down in the containing box.
You might try playing with percentages as well to see if they provide
the effect you want. Setting the horizontal percentage (the first
value) to 50% will centre the image in the containing box.
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/