Welcome to WebmasterWorld Guest from 50.17.16.177

Forum Moderators: not2easy

Message Too Old, No Replies

Double background image not going all the way down

     
7:36 pm on May 14, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Jan 27, 2005
posts: 229
votes: 0


I have two background images. The very back is a gradient. The next image is behind my content. The problem is when I scroll down the page the content image isn't showing. I think the problem is the height being 100%. Is there another way of doing this?

html {
background: #f3f3f1 url(images/background_gradient.png) repeat-x;
height: 100%;
}

body {
margin: 0;
background: url(images/background_content.gif) repeat-y center;
height: 100%;
}

8:47 pm on May 14, 2009 (gmt 0)

Full Member

5+ Year Member

joined:Mar 3, 2009
posts: 227
votes: 0


What works for me is this:

body {
min-height:100%;
position:relative;
margin: 0;
background: url(images/background_content.gif) repeat-y center;
}

Leave out height:100%

That's just telling it to be the height of the viewing window and then stop... so when you scroll it breaks. with min-height:100%, you are telling to to be at the very least that.