snoepdogg Posted April 25, 2011 Share Posted April 25, 2011 Hi, I'm working on a website here I want to have three fixed backgrounds on different places. Now two BGs are working propperly but one not. The HTML <body> <div class="divBG1"> <div class="divBG2"> Content website......... </div> </div> </body> The CSS html { width:100%; height:100%; } body { background:url(image1.png) repeat-x fixed bottom #FFFFFF; margin:0px; padding:0px; position:absolute; height:100%; width:100%; } .divBG1 { background:url(image2.png) no-repeat fixed bottom left; width:100%; min-height:100%; height:auto !important; height:100%; } .divBG2 { background:url(image3.png) no-repeat fixed bottom right; width:100%; min-height:100%; height:auto !important; height:100%; } Now the problem pops up with divBG2. It has not the 'prommised' height:100%;. divBG2 has the height of the content inside it. The website content needs lay on top of the three backgrounds. I also attached the files. Does someone has an idea? Cheers, Snoep. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 25, 2011 Share Posted April 25, 2011 Remove these: .divBG1 { background:url(image2.png) no-repeat fixed bottom left; width:100%; //min-height:100%; //height:auto !important; height:100%; } .divBG2 { background:url(image3.png) no-repeat fixed bottom right; width:100%; //min-height:100%; //height:auto !important; height:100%; } Quote Link to comment Share on other sites More sharing options...
snoepdogg Posted April 26, 2011 Author Share Posted April 26, 2011 Hi, Thank you for the reply. I already tried setting the height:100%. The backgrounds of the div elements will then dissapear when you scroll vertical. Resize the window for a vertical scrollbar and then scroll completly down. Do you have any other idea? snoep Quote Link to comment Share on other sites More sharing options...
saurabhx Posted April 26, 2011 Share Posted April 26, 2011 Just absolute position your divBG2:- .divBG2 { background:url(image3.png) no-repeat fixed bottom right; width:100%; min-height:100%; height:auto !important; height:100%; position:absolute; } Quote Link to comment Share on other sites More sharing options...
saurabhx Posted April 26, 2011 Share Posted April 26, 2011 Here I have corrected ur file and attached it [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 26, 2011 Share Posted April 26, 2011 @snoepdogg you have eyes but you dont see. I did NOT tell you to set the height at 100%. I said REMOVE the "min-height:100%;" and the "height:auto !important;" from .divBG1 and .divBG2! Try it - it works. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.