Images won't show in footer

Question

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/

Answer 1

use display block style in .facebook a and .twitter a

Please check, I have updated your jsFiddle file, you can change the css as per your design.

http://jsfiddle.net/mwx5q/3/

Answer 2

Probably an issue with your url path.

Maybe try ../images/twitter.png and ../images/twitterhover.png

This will back up one folder. Useful if your CSS is in it's own folder, you'll have to back up to the root, then go into images .

Hope this helps!