title: HTML body background image not cover all page
body: <p>I am trying to set background image to whole html page but I am failing everytime.It is not stretching.Here is my css and html codes:</p>
  
  <p><strong>Css code:</strong></p>
  
  <pre><code>body {
      background-image:url(body_background.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width:1200px;
      margin:0 auto;
  }
  
  #main_container_div {
      padding: 0px;
      width: 1000px;
      margin-top: 30px;
      margin-left: 150px;
  }
  
  #div2 {
      float: left;
      width: 250px;
      height: 600px;
      margin-top: 0px;
      margin-right: 0px;
      background-repeat: no-repeat;
  }
  #div3 {
      position: relative;
      float: left;
      width: 750px;
      height: 500px;
      margin-top: 50px;
      overflow: hidden;
  }
  </code></pre>
  
  <p><strong>Html body:</strong></p>
  
  <pre><code>&lt;body&gt;    
      &lt;div id="main_container_div"&gt;
          &lt;div id="div3"&gt;
          &lt;/div&gt;
          &lt;div id="div2"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <hr>
  
  <p>You can try with an image that has 1366x768 size. Also I am trying this on 1366x768 resolution.Note that the problem is visible on this or higher resolutions.Thanks for any help..  </p>