Welcome to WebmasterWorld Guest from 54.166.54.215

Forum Moderators: not2easy

Double background image not going all the way down

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

10+ Year Member



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)

5+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month