title: Resposive A Img CSS
body: <p>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  <strong><a href="https://jsfiddle.net/08zd25qb/" rel="nofollow">JS FIDDLE</a></strong></p>
  
  <p>Here is my code....</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="logo" class="col-md-8"&gt;
  &lt;a href="&lt;?php echo esc_url(home_url('/')); ?&gt;" title="WINNING POST BREWERY &amp; PUB"&gt;WINNING POST BREWERY &amp; PUB&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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
  }
  </code></pre>