i making page layout divided 3 sections : header, main body, , footer. want background image in main body. when try that, experiencing problem. image not covering complete area. leaves area @ bottom. check fiddle proper explanation.
here have done far:
html
<html> <head> <title>gehri route: login, signup</title> </head> <body> <div class='headercontainer'> <div class='header'> header </div> </div> <div class='mainbodycontainer'> </div> <div class = 'footercontainer'> <div class='footer'> footer </div> </div> </body> </html> css
body { background-color: rgb(250,250,250); margin: 0; padding: 0; } .headercontainer { background-color: rgb(245,245,245); min-width: 999px; height:60px; border:1px solid #666; left: 0; } .mainbodycontainer { margin: 0 auto; overflow: auto; background-color: rgb(250,250,250); min-width: 999px; padding: 80px 0; background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01ad=3eg20hvemhwapi8-inwzvvix_nk9hw8hjth_obqchw4pjwazylvxz9w&01ri=a8733df327ac3e9&01na=na") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .footercontainer { background-color: rgb(245,245,245); width: 100%; height:82px; border: 1px solid #666; left:0; position: fixed; bottom: 0; } .header { margin: 0px auto; width: 999px; } .mainbody { margin: 0px auto; width: 999px; } also please me make responsive design.
you need force height body , html tag of 100%. if there no content background won't appear because height of element (.mainbodycontainer) 0. in case 80px because applied padding.
check fiddle. http://jsfiddle.net/olwez/nclzn/
i added height body , html tags of 100% , minimum height of 100% .mainbodycontainer div. way don't have manually set heights or have content within .mainbodycontainer image behave wish.
i threw in overflow: hidden; on body tag scrolling gone.
here full css.
html { height: 100% } body { background-color: rgb(250,250,250); margin: 0; padding: 0; height: 100%; overflow: hidden; } .headercontainer { background-color: rgb(245,245,245); min-width: 999px; height:60px; border:1px solid #666; left: 0; } .mainbodycontainer { margin: 0 auto; overflow: auto; background-color: rgb(250,250,250); min-width: 999px; min-height: 100%; background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01ad=3eg20hvemhwapi8-inwzvvix_nk9hw8hjth_obqchw4pjwazylvxz9w&01ri=a8733df327ac3e9&01na=na") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .footercontainer { background-color: rgb(245,245,245); width: 100%; height:82px; border: 1px solid #666; left:0; position: fixed; bottom: 0; } .header { margin: 0px auto; width: 999px; } .mainbody { margin: 0px auto; width: 999px; } 
Comments
Post a Comment