title: Media queries and background images
body: <p>I have a div</p>
  
  <pre><code>&lt;div id="page"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>With the following css:</p>
  
  <pre><code>   #page {
      background: url('images/white-zigzag.png') repeat-x;
      }
  
      @media (max-width: 600px) {
    #page {      
    background: url('images/white-zigzag-mobile.png') repeat-x;
    }
  }
  </code></pre>
  
  <p>I notice when I resize my browser, I see the "mobile" background (good) but if I go back and make my browser large, my previous "large" background does not always reappear.</p>
  
  <p>It's an intermittent problem but it's happening often enough that I think I should address it.</p>
  
  <p>Is there any way to get around this "background image not appearing" problem or a way to resize background images, so that the media query "shrinks" the background image to fit the new size? As far as I know there is no (widespread) way to change the size of a background image...</p>