Images won't show in footer

Images won't show in footer

I'm adding 2 social media images to my footer. They are in my image map,
included right etc but can't seem to figure out why they are not showing
up?
Tried so much, but really can't get it right.. Has it something to do with
my footer that is fixed to my website ? I really don't know..
Code:
<div id="footer">
<div id="social">
<p>test</p>
<div class="facebook"><a href="" title="Facebook Page"></a></div>
<div class="twitter"><a href="" title="Twitter"></a></div>
</div>
<p>Copyright © 2013 . All rights reserved.</p>
</div>
CSS:
#social {
text-align: center;
}
.facebook a {
height: 33px;
width: 33px;
background-image: url('images/facebook.png');
background-repeat: no-repeat;
}
.facebook a:hover {
background-image: url('images/facebookhover.png');
background-repeat: no-repeat;
}
.twitter a {
height: 33px;
width: 33px;
background-image: url('images/twitter.png');
background-repeat: no-repeat;
}
.twitter a:hover {
background-image: url('images/twitterhover.png');
background-repeat: no-repeat;
}
/* Footer */
#footer {
padding: 5px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
background: #333;
color: #FFF;
}
#footer p {
text-align: center;
margin: 0;
}
#footer a {
color: #fff;
}
Here's an example on jsfiddle: http://jsfiddle.net/mwx5q/