How to add an image to an anchor tag using CSS?

Question

I'm making an anchor tag look like a button by using an image, but it doesn't show anything in the browser.

This is my code so far...

HTML

<span>
    <a id="knapNyhed" href="file:///E:/Projekt_skolespil/hjemmeside/index.html"></a>
</span>

CSS

.knapNyhed{
    background-image: pic/knap_nyhed_layout_00.png;
    width:226px;
    heigth: 50px;
    margin: 0 2px 0 2px;
}

Hope you can help with why I can't see my button

Answer 1

You have to add display:block or display:inline-block as a tags are set to display:inline by default and inline elements can't have a width, height or margin.

To get the background image working you have to add url. Please note that this url is relative to your css file.

#knapNyhed {
  display:block;
  background-image: url(pic/knap_nyhed_layout_00.png);
  width:226px;
  heigth: 50px;
  margin: 0 2px 0 2px;
}