469,568 Members | 1,609 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,568 developers. It's quick & easy.

background-image getting cut off outside original window display

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
3 26787
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
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
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.

Similar topics

12 posts views Thread by Stanimir Stamenkov | last post: by
1 post views Thread by dhunter | last post: by
7 posts views Thread by ryan.fairchild | last post: by
8 posts views Thread by Serge Hartmann | last post: by
1 post views Thread by P.Singh | last post: by
4 posts views Thread by Keon | last post: by
6 posts views Thread by Nancy Carter | last post: by
6 posts views Thread by Francois Bonzon | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.