CSS Background-Image not showing up

Question

I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.

Here is the CSS for what I want to do

 a.fb {
   background-image: url('img/Facebook.png');
 }

 a.fb:hover {
  background-image: url('img/FacebookHover.png');
 }

Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck

<div class="footer">
     <a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>

Any help would be greatly appreciated

Okay added the following and still not go any other thoughts

 a.fb {
    display:block;
    width: 33px;
    height: 33px
    background-image: url('img/Facebook.png');
 }

EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck

a.fb {
    border: none;
    display:block;
    width: 33px;
    height: 33px;
    background-image: url('img/Facebook.png');
 }

Answer 1

An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px display:block; width: 20px; height: 20px display:block; width: 20px; height: 20px .

Answer 2

background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).

Answer 3

You could also change the aproach completely and use html + mouseover and mouseout events:

<div class="footer">
    <a class="fb" href="http://www.facebook.com" target="_blank"> 
        <img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
    </a>
</div>

Here is a jsBin: http://jsbin.com/onehuw/1/edit

Answer 4

You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:

a.fb {
  padding: 20px;
  background-image: url('img/Facebook.png');
}

a.fb:hover {
  background-image: url('img/FacebookHover.png');
}

You could also just set the width and height of the anchor