title: Display: Block/None html elements with css..not releasing from memory
body: <p>I can't wrap my head around this. I have several Divs within a <code>HTML</code> page. Each Div represents a different section and thus contains different images for that section. All the images are referenced from css and displayed/removed using javascript (<code>document.getElementById('DIV').style.display='none/block';</code>).</p>
  
  <p>For the purpose of this example lets say I have 2 divs. Each section Div(Div1 &amp; Div2) would be the parent divs and any Div within those parents will be its child. (DIV1a, DIV2a)</p>
  
  <p>I have found that if Div1 is set using display: block and uses the css Background-image:.... and Div2 is <code>display='none'</code> when I hide Div1 using <code>style.display = 'none';</code> that it does remove it from the screen and allows me to show Div2..however the background-image is still present in the browser memory. </p>
  
  <p>The interesting thing and which I can't wrap my head around is if I place the background-img into a child div(div1a) within DIV1 when I use <code>style.display = 'none'</code> for the the Parent DIV1 the child div1a image does get removed from the browser memory when I use <code>style.display = 'none'</code> on the parent DIV1. However I have found this also to be inconsistent....it seems to work on some parent divs and not on others. </p>
  
  <p>As you can probably tell by this point I am heavily confused and really don't know how to approach this. </p>
  
  <p>Thank you all for your time and thoughts. </p>
  
  <p>Code Example:</p>
  
  <p>When using this method</p>
  
  <pre><code>&lt;div id="Div1"&gt;
      content....
  &lt;/div&gt;
  
  &lt;div id="Div2" style="display: none"&gt;
      ...content
  &lt;/div&gt;
  
  div#Div1{
      background-image: url(images/mybg.png);
      background-repeat: no-repeat;
      width: 480px;
      height: 360px;
  }
  
  document.getElementById("Div1").style.display='none';
  document.getElementById("Div2").style.display='block';
  </code></pre>
  
  <p>The image is still present in the resources tab when I execute the above javascript</p>
  
  <p>When using this method:</p>
  
  <pre><code>&lt;div id="Div1"&gt;
      &lt;div id="Div1a"&gt;
          content....
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="Div2" style="display: none"&gt;
      content....
  &lt;/div&gt;
  
  div#Div1a{
      background-image: url(images/mybg.png);
      background-repeat: no-repeat;
      width: 480px;
      height: 360px;
  }
  
  document.getElementById("Div1").style.display='none';
  document.getElementById("Div2").style.display='block';
  </code></pre>
  
  <p>The image gets removed from the resources tab when I execute the above javascript...but this effect is inconsistent and doesn't always work :s</p>