By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,678 Members | 2,439 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,678 IT Pros & Developers. It's quick & easy.

background-image getting cut off outside original window display

P: n/a
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.

Dec 16 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
A few edits here: the no-repeat fix IS in the css so you don't have to
trust me. Also, the subject says original window display but that's not
accurate, it's basically showing the background at the size of the
window and anything taller than that is cut off at the bottom.

Dec 16 '06 #2

P: n/a
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.
Dec 16 '06 #3

P: n/a
thanks for the help!

moving the background image and repeat-y to the body and centering it
fixed the problem. thanks for the note about the css comment, i don't
even know why it's in there and took it out.

Dec 16 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.