> What I really would like to ask is how do I code the css so that the piece
> of grass is always at the bottom of the browser, no matter how big the
> browser is or how much content there is further down?
>
> The ideal would be for the grass to always be at the bottom of the window
> that the user can see, even if there is still more content that requeires
> the user to scroll down.
>
> So far I have:
> body{
> background-color: #CCE7FA;
> background-image: url(images/grass.jpg);
> background-repeat: repeat-x;
> background-position: bottom;
> }
>
> which only gives me the basics. Plus, if the content doesn't fill up the
> browser window, the solid blue background continues underneath the grass!
>
I have done something like this on my blog: http://life.outtacontext.com.
My css is similar to yours:
body { margin: 0px 0px 20px 0px;
background-color: #000033;
background-image: url(images/oranges_bottom.jpg);
background-position: left bottom;
background-attachment: fixed;
background-repeat: repeat-x;
text-align: center;
}
The background image I use "matches" at the left/right seam so that when
it repeats it's seems continuous. I also position it left bottom, rather
than just bottom.
But I also have a content area that essentially sits above my background.
The background is static but when the viewer scrolls s/he is scrolling the
content area. I also added some spacing to the bottom of the content area
so that someone could scroll up enough to see the image.
BTW, the margin and text-align is used to help center the content area
however large the browser window is (the text-align is so that it will
work in IE6).
Jeff
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
