title: Will browser download image twice if it's used in both an image's src as well as a div's background-image?
body: <p>Due to reasons that are necessary but difficult to explain here I am setting both an absolutely positioned image as well as a background image on a div.</p>
  
  <p>I want to make sure that once the browser has grabbed these images (they're very large) it doesn't re-grab them.</p>
  
  <p>Let's pretend the image <code>bg.jpg</code> in the following code is 500KB. Does the following code cause the browser to download the image in its entirety twice for a total of 1000KB? </p>
  
  <pre><code>&lt;style&gt;
      header {
          background: url(img/bg.jpg) center center fixed transparent;
      }
  &lt;/style&gt;
  
  &lt;header&gt;
      &lt;img src="img/bg.jpg" width="500" height="500"&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: Thank you all for your excellent answers. I just wanted to double check and make sure I wasn't causing the user to re-download these very large images.</p>