css - Background not 100% in container div with relative absolute positioning with percentages -


i'm using page relative & absolute positioning , percentages. html & body set 100%, container div relative , interior divs absolute. background image i've set container div not filling page - why? in advance!

here's i've got:

<style type="text/css"> html, body {  width:100%;     height:100%;}  .container {    width:1000px;    height:100%;    background-image:url('background.jpg');    position: relative;    margin-left:auto;    margin-right:auto;   } .header {    width:1000px;    height:300px;    background-color:#ffffff;    position: absolute;    top:0px;    left:0px;   }   .content {    width: 680px;    position:absolute;    top: 350px;    left: 310px;   }  .post {    width: 630px;    padding: 20px;    padding-top: 50px;    }  .title {    width: 650px;    height: 20px;    padding: 10px;    position: absolute; left: -10px; top: 10px;   }     </style>  <body> <div class="container">   <div class="header">  placeholder header image.  <p><a href="index.html">home</a></p>  </div>    <div class="content">   <div class="post">    <div class="title">welcome</div>      <img src="placeholder.jpg" alt="proposal photo" width="630" />   </div>  </div> </div> 

try this

.container {   width:1000px;   height:100%;   background-image:url('background.jpg') no-repeat;   position: relative;   margin-left:auto;   margin-right:auto;   background-size:100% } 

Comments