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] Link to comment https://forums.phpfreaks.com/topic/234663-background-image/ 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%; } Link to comment https://forums.phpfreaks.com/topic/234663-background-image/#findComment-1206031 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 Link to comment https://forums.phpfreaks.com/topic/234663-background-image/#findComment-1206298 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; } Link to comment https://forums.phpfreaks.com/topic/234663-background-image/#findComment-1206323 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] Link to comment https://forums.phpfreaks.com/topic/234663-background-image/#findComment-1206325 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. Link to comment https://forums.phpfreaks.com/topic/234663-background-image/#findComment-1206463 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.