homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Double background image not going all the way down
matthewamzn

5+ Year Member



 
Msg#: 3913839 posted 7:36 pm on May 14, 2009 (gmt 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%;
}

 

CSS_Kidd

5+ Year Member



 
Msg#: 3913839 posted 8:47 pm on May 14, 2009 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved