CSS Trick: Turning a background image into a clickable link – Take 2

My previous solution to this was built on Phark’s “Accessible Image Replacement” technique. It works by pushing the text really far to the left (9,999 pixels) which makes sure it’s there for screen readers but hidden from users (unless someone has a display that’s able to show nearly 10,000 pixels to the left of the container in question). The problem seems to be that some browsers, like the one on the iPad, render a 9,999px box even though it’s not visible. This affects performance, especially for animations.

Well, there’s a better way. It works similarly, but instead of pushing the textual content so far left that we’re sure it’s outside the visible area, we push it just outside the box to the right. The advantage is that even without knowing how long the text is, we know exactly how far to push it to make sure it’s completely out of the box. So if you’re asking “How do I make a background image clickable?” This is the new answer. It’s easy, just follow these steps and I’ll show you how to make a clickable background image like this:

BlueDog Web Services

Start with just a link exactly as you would make it for any other purpose, and make sure to give the link an id so that we can use that to apply our styles:

<a href="http://bluedogwebservices.com/" title="Professional WordPress Development" id="bluedog-logo">BlueDog Web Services</a>

That’s all the (X)HTML you’ll need to make your background image clickable. Your link should look something like this:

So, how can we make a background image a clickable link? It turns out it can be done with a clever CSS trick. Let’s get started by adding the background image and make the link the same size as the image (so you can see the whole image). Since an anchor tag isn’t a block level element, we need to force it to display as “block” so that we can specify the size:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	display:block;
	height:116px;
	width:250px;
}

At this point it should look something like this: BlueDog Web Services

Now all we need to do is hide the text. This can be done using “text-indent” to indent the text just outside the containing box, using “white-space” set to nowrap to keep the text from wrapping back into the box, and using “overflow” to hide content outside the box like this:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	display:block;
	height:116px;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width:250px;
}

And the finished product looks like this: BlueDog Web Services

And there you have it – a quick CSS trick with clean markup that turns your background images into clickable links. The best thing is, these don’t adversely affect your SEO and can even be easily used inside of header tags if needed!

Update:
I was asked how to add a border. Here it is with a CSS border:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	border:1px solid #CCC;
	display:block;
	height:116px;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width:250px;
}

BlueDog Web Services

That obviously works, but the border is too close for my liking and adding padding causes our image to be out of place. Here’s the solution:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	background-position:5px 5px;
	background-repeat:no-repeat;
	border:1px solid #CCC;
	display:block;
	height:116px;
	overflow:hidden;
	padding:5px;
	text-indent:100%;
	white-space:nowrap;
	width:250px;
}

Basically we’re adding 5 pixels of padding all around, re-positioning the background image to 5px in from the top and left, then setting the background image to not repeat. Now our border looks nice:
BlueDog Web Services

About Aaron D. Campbell

Owner and lead developer at BlueDog, Aaron has 10+ years of web development experience, it a regular core contributor to the WordPress project, and has released many WordPress plugins.
This entry was posted in CSS and tagged , . Bookmark the permalink.

20 thoughts on “CSS Trick: Turning a background image into a clickable link – Take 2

  1. Pingback: » CSS Trick: Turning a background image into a clickable link » BlueDog

  2. Nick B says:

    I have been trying to make the image have a css border as well, although the border always ends up around the text off to the side.

  3. isela says:

    I have a issue on how to make the top image clickable …. any thoughts? Also maybe you can help with a solution to an additional issue. I have the bottom image set to no-repeat, yet it still repeats on x… and thoughts?

    .footerzig{background: url(“http://www.iselaespanadesignstudio.com/wp-content/themes/twentytenchild/images/zigzagf.png'”), repeat-x scroll 0 0 transparent;
    clear: both;
    height: 154px;
    }
    .footerzigover{background: url(“http://www.iselaespanadesignstudio.com/wp-content/themes/twentytenchild/images/idea.png'”), no-repeat scroll 0 0 transparent;
    clear: both;
    height: 154px;

    }

  4. isela says:

    I have a issue on how to make the top image clickable …. any thoughts? Also maybe you can help with a solution to an additional issue. I have the bottom image set to no-repeat, yet it still repeats on x… and thoughts?

    .footerzig{background: url(“http://www.iselaespanadesignstudio.com/wp-content/themes/twentytenchild/images/zigzagf.png’”), repeat-x scroll 0 0 transparent;
    clear: both;
    height: 154px;
    }
    .footerzigover{background: url(“http://www.iselaespanadesignstudio.com/wp-content/themes/twentytenchild/images/idea.png’”), no-repeat scroll 0 0 transparent;
    clear: both;
    height: 154px;

    }

  5. April says:

    Life saver! Thank you so much! Works great!

  6. Joel Eade says:

    You are a legend, thank you! :)

  7. Tobias Malikowski says:

    Thank you for the great css trick! The only thing that makes the text appear again, is searching for it (ctrl+f). But i think no one would do that…

  8. Great trick Aaron! It did the job fine on my drupal site in Firefox.
    In all the other browsers the link kept showing at the right end of the backgroundpicture.

    Nevertheless, thanks so much for sharing!

  9. Nijish says:

    Hey Aaron,
    Thanks for the code.

    I got a small problem here.
    My idea is to have this:
    BODY
    IMAGE (Clickable)
    WRAPPER (margin: 0 auto)
    Page Contents…

    But my background image link is not working.
    I guess its because of the #wrapper code with “margin: 0 auto” which comes immediately below it.
    z-index changes aint working either.
    Any ideas? This thing is getting on my nerves.
    Thanks in advance… :)

  10. Okapi says:

    Great solution, thank you!

    If you want to get this to work also in IE6 and IE7, the background image style should not (only) be applied to the a tag, but (also) to a surrounding div container.

  11. Massimo says:

    This is very nice. I have a question: is it possible to add a _blank “target” in the CSS so that the new page opens in a new window? :)

    • There are CSS properties in the proposed CSS3 spec that are supposed to do this:

      .external-link {
      	target-name: new;
      	target-new: window;
      }

      However, as far as I know this isn’t supported by any browsers yet.

      You can add target=”_blank” to the HTML or add some JavaScript to handle it.

  12. Jake says:

    Great trick. I’m trying to use this to have 5 icons in a row but I can’t seem to control their placement. I want to be able to center them in a div, but can’t figure out how.

    Sincerely,
    A css-learner

  13. Pingback: » CSS Trick: Turning a background image into a clickable link

Leave a Reply

Your email address will not be published. Required fields are marked *

Note: If you are replying to another commenter, click the "Reply to {NAME} ↵" button under their comment!