I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly.
Below is the CSS code that I'm working with:
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the HTML code snippet that I have tested in different ways to display the images without success:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
I would really appreciate any guidance or suggestions on how to make this work
Update: I tried adding the following code, but still not getting it right. Any other ideas?
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
UPDATE: Success! I got it to work by fixing the missing semicolon after the height property. However, now there's a white border around the image. I attempted setting border: none; but that didn't work either
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}