Change background image size with media query

[admin]

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override">

.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;

}
    }

<pre class="snippet-code-html lang-html prettyprint-override">

<div class="logo"> </div>

</div>
</div>


I can't work out why this doesn't work - any ideas why the image doesn't render?

HTML:

<div class="logo"> </div>

CSS:

.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;}
}

Any help greatly appreciated