title: CSS - Responsive background image with text on it
body: <p>I hope someone will be able to help me with my problem. I'm working on a mobile site and I need the footer background image to be responsive with footer links centrally positioned over this image. To make the background image responsive I used that code:</p>
  
  <pre><code>#footer-bg {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
      font: 0/0 serif;
      text-shadow: none;
      color: transparent;
      background-size: 100%;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-image: url("../img/background.jpg");
      }
  #footer-bg .inner-footer {
      padding-top: 39.06%;
      display: block;
      height:0;
  }
  </code></pre>
  
  <p>and it works as a charm, but when I add links they are way out of position, on the bottom of page. Is there a way around this? Thanks in advance for any help.</p>
  
  <p>JSfiddle code here <a href="http://jsfiddle.net/4kuUm/" rel="nofollow">http://jsfiddle.net/4kuUm/</a></p>
  
  <p>Just to clarify, I want the links and copyright logo to be positioned over an image and not the bottom of it.</p>