title: Change background image size with media query
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.logo {
      background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
      background-size: 100%;
  }
  
  @media(max-width:767px) {
  .logo {
      background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
    background-size: 50%;
    background-repeat: no-repeat;
  
  }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="logo"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't work out why this doesn't work - any ideas why the image doesn't render? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="logo"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.logo {
  background-image: url(../img/logo_white.png);
  background-size: 100%;}
  
  @media(max-width:767px) {
  .logo {
  background-image: url(../img/logo_white.png);
  background-size: 50%;
  background-repeat: no-repeat;}
  }
  </code></pre>
  
  <p>Any help greatly appreciated</p>