Background image does not show in tag

Question

I use bootstrap 3. I try to use \"icon link\" by using tag as shown below:

HTML:


CSS:
.link         


        

Answer 1

The anchor element has no content, and it has no styles that would affect it's dimensions, consequently it has an effective area of zero square pixels.

The background image is probably being applied just fine, you can't see it because there is no area on which it can be displayed.

The code implies that the image is there to tell the visitor where the link goes, that would mean that the image is content and not background and should be expressed as an image element (which would take on the dimensions of the image file automatically).

Using an image element also provides you with the opportunity to supply alt text for the benefit of screen readers / search engines / people with internet connections that briefly fell over while loading the image / etc.

<a href="#"><img src="img/icon.png" alt="top of page"></a>

Answer 2

Because your <a href="#" class="link"></a> is empty.

You need to give it a size :

.link {
    background-image: url(img/icon.png);
    height:100px;
    width:100px;
    display:block;
}

Answer 3

You have to make the tag enought big to show the image Example: CSS:

.link {
  background-image: url(img/icon.png);
  display: block;
  width: 100px;
  height: 100px;
}