Using background images with links

Associating icons with links can in my opinion be a powerful design device. With a small amount of CSS it is simple to add icons into your links.

To apply an icon to links in CSS you use background-image. Although you should use icons on links sparingly icons can greatly improve the usability of a site. In this example we have a link that goes to a journal entry page. Make an icon using Illustrator, Photoshop or your favorite imaging software. Make sure that it relates well to the size of the text it appears next to. Here I've made a simple pencil:

The Markup

In this example we have a simple link within a div

<div id="example-link">
    <a href="#">Link to journal article</a>
</div>

The CSS

#example-link a
    {
    padding-left: 15px;
    background: url(/images/examples/bglinks/pencil_icon.gif) 3px 1px no-repeat;
    }

Explanation:

Padding left - This moves the text away from the image. Depending on the width of your image you will need more or less padding

Background - This has the rules associated with the the background image

url(/images/examples/bglinks/pencil_icon.gif) - This is the path the image you want to be your icon.
3px 1px - These values position the background image. The first value is the background image's distance from the left of the a tag, the second is the distance from the top of the a tag.
No-repeat tells the browser only to show the image once.

The code in action

A simple icon applied to a link using CSS. (If you are reading this in a newsreader you won't see the image)

Link to journal article

Comments

Mukul Mar 12 2007

What do I do if I want to add a link to my background image using the CSS. That is, I want to click the image and open a new page with my website.

Thanks
Mukul

George Ornbo Mar 12 2007

@Mukul - you would just add a link into your markup:

<div id="example-link">
    <a href="http://www.yourwebsite.com">Link to journal article</a>
</div>

If you want it to open in a new window use

<div id="example-link">
    <a href="http://www.yourwebsite.com" target="blank">Link to journal article</a>
</div>

HelloWorld Apr 28 2007

Peace people

We love you

Spielmann Sep 17 2007

I think what he asks for is how to click on THE background image and go somewhere else.

I would like some help on that too. I want to make my background image clickable AS a link.

George Ornbo Sep 17 2007

@Spielmann - if you want the background image to link to a different location then this technique won’t work for you. You should put your image inline and wrap it in a link. If you want the image and link to go to the same place then the background image technique will work well.

Rose Gibson Dec 30 2007

@ George Ornbo

Yes you are precisely correct that wrapping it in an <a> tag inline works perfectly.

HOWEVER!… This fails the W3.org quality control validation. The entire point of using CSS is to meet the newer web standard guidelines thus doing this defeats the object of the exercise.

What you get is “document type does not allow element “div” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag.”

Description:The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

And so… without all the rigamarole of creating unnecessary ‘hot spots’ in drawn out code. The hunt for the solution continues…

Rose Gibson Dec 30 2007

Yargh - going to put the background image in with css - then cover it entirely with a transparent clickable gif along with its descriptive tags and see if W3 like that.

Chris Jan 17 2008

Hello,

I have a background image, how do I go about putting link buttons directly on that image. I’m trying to like like images I have and other information. I’m just not quite sure where to put it in the code. Thank you in advance for your help.

George Ornbo Jan 18 2008

@Chris - the background image relates to the element you attach it to. You
can’t have separate links for a background image and the text associated
with it. If you only want the image and not the text to be a link then you
should you use:

<a href="http://www.yourlink.com/"><img src="/path/to/your/image.jpg" alt="your alt text" /></a><a href="http://www.yoursecondlink.com">Link to something
else</a>

Julia Feb 12 2008

I found I needed to put single parentheses around the background image, i.e.:

background: url(’linenav.gif’) 3px 10px no-repeat;

Chris Jun 18 2008

Yeah I’m having this exactly problem I want to link a background image. i’ve created background css rollovers and want the div to link somewhere. the only solution I can think of is like someone mentioned and place a tranparent gif...not really how i wanna do it.

Chris Jun 18 2008