Resposive A Img CSS

Trying to add a background image in css on an a tag and make it responsive within a div! Everytime the I resize the browser the image stays the same size. Not sure what I am doing wrong. Have set up a JS FIDDLE

Here is my code....

HTML

<div id="logo" class="col-md-8">
<a href="<?php echo esc_url(home_url('/')); ?>" title="WINNING POST BREWERY & PUB">WINNING POST BREWERY & PUB</a>
</div>

CSS

#logo {
    text-align:center;
    height:auto;
    min-height:145px;
    background:rgb(212,228,239);
    background:rgba(212,228,239,.2);
    background:-moz-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(212,228,239,.2)),color-stop(100%,rgba(134,174,204,.8)));
    background:-webkit-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:-ms-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:-o-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -ms-border-radius:8px;
    -o-border-radius:8px;
    border-radius:8px;
    border:1px solid #0D4364;
    box-shadow:0 1px 1px #79C6FF;
    padding:6px;
}
#logo a{
    background-image:url('ASSETS/logo.png');
    background-position:0 0;
    background-repeat:no-repeat;
    margin:0 auto;
    display:block;
    width:100%;
    height:auto;
    text-indent:-9999px;
    background-size:cover
}