How to do this in CSS?

HTML & CSS
1

How to show a background image with a hyperlink using this type

<a href="#" style="background-image: url(http://www.abc.com/image.jpg);"></a>

Thanks.

2

Well, first remove the inline CSS as it is poor coding practice.

Next, get the dimensions of the background image in pixels (eg. 100x100).

If:
<a href=“www.linkhere.com” title=“My link title” id=“myLink”></a>

Then:

a#myLink
{
  height:100px;
  width:100px;
  display:block;
  background:url('path/to/image/file.jpg');
}

NOTE: Unless there is good contrast between the link and the background color, a user that has images disabled will not be able to tell if it is a link as you cannot assign an ALT attribute to a background image.

You could make a 1x1 pixel blank transparent .gif, use it between the <a>…</a> tags and give it a proper ALT attribute so the text will show up with images disabled in the link area.

3

Hi,

Where is that anchor located in your page?
Is it in a string of text, or is it meant to be a clickable block elsewhere with dimensions?

If it is a block then you can set display:block on the anchor and apply dimensions to it.

Inline elements are not capable of taking on dimensions, however if it needs to go in a string of text with dimensions on it you could use display:inline-block;

Whichever way you go, you should be setting a class or an ID on the anchor so you can style it in the CSS. :slight_smile:

4

Thanks beebs93 and Rayzur.
Your answers helped me a lot.

Well Rayzur, I was looking for a clickable block, which you and beebs93 told, that by using display: block function.

Thanks again.