Question

How can I place only an image in a div as background image, and add url link to it.
Currenty I’m doing it this way:

<div class="image"><a href="example.com"><img src="books.png" alt="Test" /></a></div>

I want to do something like following, but its not working (the image does not appear).

<div class="image"><a href="example.com"><span class="books"></span></a></div>

Thanks.

Answer 1

Place the background image in the <a> tag if you want it clickable.

your css:

.image a { display: block;
    background: url('image.jpg') no-repeat;
    height: 50px; /* obviously use the same dimensions as your image */
    width: 50px; /* obviously use the same dimensions as your image */
}


<div class="image"><a href="example.com">&nbsp;</a></div>

or better yet, get rid of the div entirely, and just apply the image class directly to a:

<a class="image" href="example.com">&nbsp;</a>