On 2006-12-16, KNDesign <kn******@gmail .comwrote:
I've set a background image to repeat-y and at 100% height. It appears
fine when I open the window, but when I resize to a smaller height so
that I must scroll down to see the rest, the background image is
suddenly gone from the bottom.
#background {
position: absolute;
top: 0px;
bottom: 0px;
left: 50%;
margin-left: -370px;
background-image: url(images/background.gif) ;
background-repeat: repeat-y;
width: 740px;
height: 100%;
}
see here: http://www.kndesign.net/index2.htm
I've tried turning off the background repeat but that doesn't seem to
work (although it's not shown in the css, just have to trust me that I
tried it). Can anyone help? I'm fairly new to this so the answer may be
obvious to everyone else.
height: 100% means 100% of the viewport height. You might think that
would be recalculated if the viewport was resized, but it isn't in any
browser I know (and the CSS spec does say that 100% refers to an
"_initial_ containing block").
Really you want your background image to be the height of the body
element, not the height of the viewport.
So why not get rid of the background div altogether, and add to the body
selector something like this:
background-image: url(images/background.gif) ;
background-repeat: repeat-y;
background-position: center top;
By the way you have a dodgy comment at the top of your stylesheet
css.css
//* CSS DOCUMENT *//
that was causing the whole body selector to be rejected for me. Change
it to
/* CSS DOCUMENT */
Or better still just delete it altogether since it's not exactly a very
informative comment!
I'm not quite sure what you were up to with left:50%, margin-left:-370px
on the #background div anyway. background-position may be just as good
or better a way to position your background image.
