CSS - Responsive background image with text on it - css

Question

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:
#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;
}
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.
JSfiddle code here http://jsfiddle.net/4kuUm/
Just to clarify, I want the links and copyright logo to be positioned over an image and not the bottom of it.

Answer 1

I cleared out a lot of the extra cruft that you had in your HTML & CSS to strip this down to the essential bones. You may need to add some minor styings (padding margins etc to get the two menu list items to match up but it's mostly there.
I can say that with a little extra time the HTML & CSS could be trimmed further.
JSfiddle Demo
HTML
<div class="footer-container">
<footer class="wrapper">
<div class="social-icons">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram"/>
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter"/>
</li>
</ul>
</div>
<div class="f-links">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
CSS
.footer-container footer {
color: #000000;
padding: 20px 0;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("http://queermeup.com/wp-content/uploads/2010/10/background-2-640x250.jpg");
}
.social-icons {
text-align:center;
}
.social-icons ul,
.f-links ul {
list-style:none;
width:50%;
margin:0 auto;
text-align: center;
}
.social-icons li,
.f-links li {
display: inline-block;
width:30%;
}
.f-links a {
font-size:12px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
text-decoration: none;
color: black;
padding:2px 10px;
white-space:nowrap;
}
.f-links a:hover {
text-decoration: underline;
}
.divider {
padding:0;
margin:0;
}
.divider p {
margin: 0 5%;
text-align:center;
border-top: 1px solid #000;
font-size:11px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

Answer 2

<div class="footer-container">
<footer class="wrapper"> <span id="footer-bg" role="img" aria-label="Footer">
<div class="social-icons" style="padding:25px;">
<ul>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Join us on Facebook">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Follow us on Instagram">
</li>
<li><img src="https://s3.amazonaws.com/media.guidebook.com/upload/19124/custom_icons/menu-icon-facebook.png" alt="Subscribe to our Newsletter">
</li>
</ul>
</div>
<div class="f-links" style="padding:25px;">
<ul>
<li>About Us
</li>
<li>Contact Us
</li>
<li>Terms & Conditions
</li>
</ul>
</div>
<!-- /f-links -->
<div class="divider">
<p>© ALL RIGHTS RESERVED.</p>
</div>
</footer>
</div>
This works my friend :)