title: Background image exceed the #wrap div
body: <p>I've a website with a #wrap div centered in the page with attribute { margin: 0 auto; }</p>
  
  <p>My Cover image should take all the body in width (exceeding the #wrap) and 780px in height.</p>
  
  <p>The image doesn't start form absolute point 0 on the left because the #cover div is inside the centered #wrap div.</p>
  
  <p>How can I resolve this problem?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  
      &lt;div id="cover"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#wrap {
      width: 960px;
      margin: 0 auto;
  }
  
   #cover {
          background-image: url(bg.jpg);
          background-attachment: fixed; 
          background-clip: border-box; 
          background-position: center; 
          background-repeat: no-repeat; 
          background-size: cover; 
          height: 780px; 
          z-index: -10;
      }
  </code></pre>