There is an updated version of this which is better optimized, especially for mobile browsers. Please check out Turning a background image into a clickable link – Take 2

One of the things I most often get asked by people trying to master HTML and CSS is “How do I make a background image clickable?” It’s easy to wrap a regular image tag in a link, but what if your design or situation required that you use a background image? It’s actually quite simple. Just follow these steps and I’ll show you how to make a clickable background image like this:

Range Web Development

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://ran.ge/" title="Professional WordPress Development" id="range-logo">Range Web Development</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:

#range-logo {
	background-image:url(http://ran.ge/content/uploads/2009/11/logo-trimmed.png);
	display:block;
	height:100px;
	width:460px;
}

At this point it should look something like this: Range Web Development

Now all we need to do is hide the text. This can be done using “text-indent” and indenting the text completely off the screen like this:

#range-logo {
	background-image:url(http://ran.ge/content/uploads/2009/11/logo-trimmed.png);
	display:block;
	height:100px;
	text-indent:-9999px;
	width:460px;
}

And the finished product looks like this: Range Web Development

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!

200 thoughts on “CSS Trick: Turning a background image into a clickable link

  1. I’m trying to use your trick with a logo on the left and some text in a paragraph tag on the right side of my header but my paragraph is being pushed down by the block containing the link. How can I get the paragraph to appear on the same line as the bg image?

    • You’ll need to set it to display:block as well as float:left. Here’s some code:

      <a style="background-image: url(ran.ge/content/uploads/2009/11/logo-trimmed-300x65.png); display: block; height: 65px; text-indent: -9999px; width: 300px; float:left; margin:0 1em 1em 0;" title="Professional WordPress Development" href="/" rel="nofollow">Range Web Development</a><p>Here is some test text. ... Here is some test text.</p>
      

      Xavisys Website Development

      Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text. Here is some test text.

  2. it seems you need to write the html too, only the css doesn’t work – i mean this is a trick, and not css code if i got it right?
    the issue is, i know up to now only how to add css in my blog, but not how to meddle into the html layers yet. so, no html, no trick?
    point is, at some special few places like free-text widgets you can add an image&href by html, some others you can’t. there, i just put my image as bdg no-repeat via css, but so i lose the possibility to link with href..

  3. sorry, don’t know if this will post, but

    html: a link, title, div with id “xavisys-logo”, span, text, close span, close div, close a link.

    html

     &amp;lt;a href=&amp;quot;http://xavisys.com&amp;quot; title=&amp;quot;Professional WordPress Development&amp;quot; &amp;lt;div id=&amp;quot;xavisys-logo&amp;quot;&amp;gt;&amp;lt;span&amp;gt;Xavisys Website Development&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/a&amp;gt;
      • Why on earth you use div and span as well. It’ll make the page loading difficult and time taking as well. It can be done through one css that has been given by Aaron.

        • I also prefer the span method, because this way I can use a instead of a background image. This means I don’t have to change the CSS on editing the image and its width.
          I agree that this method is somewhat ‘ugly’, but so is SEO.

  4. Hi

    I notice that when you click it in FF you don’t get any dotted borders to appear on the final one. I am following your steps, but due to the text indent FF is showing me in my website a dotted border around my link that extend far left. How did you remove this dotted border?

    Thanks!

  5. I’m using wordpress and I’m very confused about where to put the HTML.
    Do I put the HTML code in index.php or in header.php?

    You explain all the other steps really well but you left me very confused on the html part.
    I’ve looked up other tutorials that describe how to do this but they all seem to assume that you know what file to edit for the html.
    So I’m probably missing something really obvious but I would really appreciate a explanation on where to put the html code.

    Thank you!

    • Different themes will have this in different places. Assuming you want to use this trick in the header of your site, a good place to start looking is header.php but there’s no guarantee. However, this particular trick can be used anywhere you want a clickable background image, which is why I don’t say where to use it.

  6. Hi, thanks for the great tips, I’m really close to getting this trick but I’m missing the last step. I have the text link where I want it but I can’t seem to create the block I need to cover the entire image and I can’t seem to make the text disappear. Here is what I’ve input.

    Get An Online Tutoring Session From A Masters Or Phd Student For 3.95

    /*—:[ Trial Button Css Trick, input by Liam Martin to make a background image clickable]:—*/

    #trial_button { background-image: url(images/special_icon.png); display: block; height: 166px; text-indent: -9999px; width: 166px; }

    I’m also rocking thesis 1.6 and have a customized skin. There must be something stupid I’m doing, if you can point it out to me I’d be plenty thankful

    • If you change the width and height to something other than the image size, you should also add the following CSS rules:

      background-repeat:no-repeat;
      background-position:center center;

      The background-position can be used to place the image in a different place within the box, and the background-repeat is used to tell it not to tile the image.

    • The method itself validates. However, there are definitely error on this page in the comment section. Nothing I’ll take the time to fix, but you’re right…this page doesn’t validate.

  7. I have just been trying this and stubled along here looking for an explanation to my problem.

    I am trying to create a similar effect only with multiple images in an unordered list. Can anybody help?

  8. Aaron,
    Thanks for the tip, it worked well and my preview in Dreamweaver shows up great. But, (and I’m a novice) I placed the logo/link image in my header, which has a blue background.
    When I update the site, the logo disappears. is the color conflicting with the image? Can’t I have both?
    I’m designing a site for a class project (http://rwany.sibaja.net)

  9. All is working without any tricks!

    HTML:


    CSS
    #xavisys-logo {
    background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
    display:block;
    height:58px;
    width:200px;
    }
    #xavisys-logo a {
    display:block;
    height:58px;
    width:200px;
    }

  10. HTML:



    CSS
    #xavisys-logo {
    background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
    display:block;
    height:58px;
    width:200px;
    }
    #xavisys-logo a {
    display:block;
    height:58px;
    width:200px;
    }

  11. I have tried following your trick and some of the tips in the comments, and most of it works nicely.
    But I cant seem to place the logo in the middle of the header and make the outline around the link disappear.
    Any ideas what I’ve done wrong?

    #grillhytte_logo {
    background-image: url(grillhytte_logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    display:block;
    height:130px;
    width:500px;
    text-indent:-9999px;
    }

    #grillhytte_logo a{
    display:block;
    height:130px;
    width:500px;
    outline: none
    }

  12. I have two background images. The trick works in IE but not Firefox.

    z-index: 1 is a white background
    z-index: 10 is the image that sits on top of the white background and that I want to use as the clickable link.

    Any ideas?

    Thanks.

  13. Hey guys, I tried this and I simply can’t make it work. Please check out viedusoliel.com/cms and see the ‘order now’ button on top right. That is the one I’m trying to make into the link. Please advise!

  14. Thanks for this, proved very useful, allowing me to get the result I want while still using the menu built into my CMS.

  15. I think that this idea is great but I’m a little concerned about using “invisible” or hidden text (assuming that text plotted outside of the display area is also regarded as hidden) on a site and getting banned from search engines.

    Do you think that adding valid text in the ALT parameter of the HREF tag would correct this potential problem?

    Otherwise, great tip, Aaron. Thanks!

    • The reason that I didn’t answer this is because it’s really not a question with a “right answer”. The “experts” out there tend to disagree, each having their own opinion. We *do know* that Google (and probably other search engines) don’t like you to try to display something different to them than you display to your users. However, if you were linking a regular image you’d use alt-text in the image tag. This just gives you that same ability but with a background image.

      In the end, I’m not worried about it. I use it in several places and haven’t noticed any penalizations. However, if it worries you…don’t use it.

  16. Okay, you’re going to have to break it all down for me. I tried again and again to follow what is in here and end up with squat. Just text that is a standard <a href rel=”nofollow”> type link. No background image comes through from the CSS page. In the words of Denzel Washington from Philadelphia, explain it to me as if I were 7, because there is way too much data missing. My CSS and HTML work find except for this, but I want the popup to be a GIF animation that will take people to the site if clicked (kind of like what you see on the YOU MAY BE A WINNER banners.

      • So…any idea how the banners on sites that are links are done then? Or would those just be popups that are sized to fit around the anchor image on a standard web page with the popup sized to fit around the image?

      • You certainly can. Handy for sitting behind simple image gallery containers (like a div) where the image fades out and is replaced with another or when using ajax to replace content.

        I use animated loading gif’s as background images to ensure users always get some response while an image or response is loading.

    • I definitely don’t worry about IE6 anymore. For me (across multiple sites) IE6 sits at about .6% (yes, just over one-half of one percent). Your mileage will vary, but I’m guessing it’s a small percentage for you too. I’m sure this could be tweaked to work on IE6, but I won’t take the time to do it.

  17. <a href=’www.google.com’ rel=”nofollow”></a> and you’re done, no css needed :)

    Make sure u don’t have any styling on the links themselves.

    • adding a link like that will do absolutely nothing without some CSS. CSS is the only way to add a background image, not to mention you need to set the size of the link so that it covers the whole background image.

  18. Im building a website to run also in iPhone and i want to center the image only in the iPhone. How i do that?
    HTML:

    MobileSyncBrowser

    CSS:
    /*HEADER*/
    #header{
    -webkit-user-select:none;
    display: block;
    width: 100%; height: 43px;
    position: relative;
    background-color:#b9f73e;}

    #header a{
    text-indent:-1000em;
    display: block;
    height: 43px;
    position: absolute;}

    #header #home{
    background: url(../img/msblogo.gif);
    width: 250px;}

  19. HELP!
    My css page looks like this:

    #name {
    width:670px;
    height:130px;
    text-align:left;
    float:left;
    font-size:1.9em;
    background-image:url(images/header/careersblogheader.jpg);
    display:block;
    text-indent:-9999px;
    }
    #name h1 {
    margin:10px 14px 0 0;
    display:none;
    }
    #name a {
    text-decoration:none;
    }

    #name a:hover {
    text-decoration:underline;
    }

    And the php file looks like this:

    <div id=”header”>
    <div id=”name”><h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1></div>

    And still my background image isn’t linked. What am I doing wrong? Waaaaah!

    • Two things:
      1) You sound kind of whiney. I have a 6 year old that does enough of that ;)
      2) If you want it to work, follow the directions in this article. Your HTML and CSS look nothing like what I have here.

      • I’m trying to edit an existing blog template (handgloves, actually), so I was copying in everything they had since it was a bit more complicated than basic html. Since I’m not css or php proficient (obviously) I was trying to delete as little of their code as possible. I inserted the “display:block” and designated the height/width and created the “text-indent:9999px” like you suggested.

        I apologize if trying to make a joke in frustration came across whiney. Perhaps trying to do this while keeping my three kids entertained has that effect. Then again, maybe I’m entirely out of my league.

  20. I used this to put picture into background with css but the picture does not appear. Then I put the background code into HTML and the picture appears. I put the background picute into top center and I want to move the link also into this position but do not know how. Please what css rule should be applied?

  21. I have no idea what I’m doing wrong… I came to this page because everything I had tried failed. I’ve coded everything exactly like it does here, even made some modifications, and nothing works. Not in IE, not in Firefox or Chrome, nothing. Here’s my code:

    HTML:
    Home

    CSS:
    #1a {
    width:75px;
    height:25px;
    background:url(menu4.png);
    display:block;
    }
    #1a a {
    width:75px;
    height:25px;
    display:block;
    background:url(menu4.png);
    }

    I tried giving the anchor tag an id, as in the tutorial, but that didn’t work. My guess is that anchor tags can’t have ids…? But changing it to the code above didn’t work either. I don’t get it.

  22. I have tried your suggestions but I have come up empty handed.
    When I add the link to the page, the link shows up but is not clickable.
    Even when I ad the suggested styling for the background image in the css everything displays fine, but the image is not clickable.

    Do you have any suggestions.
    Here’s the URL we are trying it on.
    http://texteffexts.com

    This is being used on a WordPress theme in the page template.
    Thanks again.
    Tim

    • You seem to have a problem because the link is actually UNDER everything else, which makes it unclickable. You can either move the link to the end of your HTML (just before the </body> tag), or add this to the #demo CSS:

      z-index: 10;

      • Hi!

        I’m having the same problem. I’m really new to CSS so there’s probably something obvious I miss. I get the picture instead of the text but it’s not clickable. I’m doing it on a WordPress site and I want to change the Page navigation items to be clickable images in the sidebar.

        This is the CSS I used. I placed it last in the CSS-file and it displays the image but it’s not clickable.

        #menu-item-51 {
        background: url(images/news.png) no-repeat;
        display: block;
        height: 27px;
        width: 50px;
        text-indent: -9999em;
        }

        The actual site is at http://mariamcateer.com

        Any help is gratefully accepted.
        Björn

  23. I just used your tip on one of my sites and it works brilliantly, this is much better than using an image map too as you can set custom SEO title and text for different portions of an image.

      • Quite bad :P
        I was thinking that it would load faster…

        But how about: putting multiple background images with the help of CSS (as buttons) and then putting links to them…

        Thing is that if you place images with INSERT directly into the .htm or .php page, then there will be more requests by the browser… In a way it makes sense to me: perhaps with background images there will be less requests? (because they would be in the CSS, not the page itself)

    • Hi,

      Thanks for this – works great.
      I am trying to position text at the bottom of this image (ie inside this image).
      How do you modify the css to get this to work?

      Thanks

  24. So, I love this particular approach, and I am using it in our new Intranet site. The issue I am running into is that the whole image doesn’t function as a link. Only the top, maybe 20% and right 30% are a link, so there is a block in the bottom left that doesn’t show up as a link.

    Any thoughts?

  25. Thank you soooo Aaron for the great css hack.

    But I am total newbie to css and I am going to ask you a very stupid question. So please ignore my lack of intelligence and help me with this.

    I am trying to use this hack on a css code that start with a dot (.) and not hush #.
    i.e .xavisys-logo {
    background-image:url(/wp-content/uploads/2009/11/email_logo.gif);
    display:block;
    height:58px;
    width:200px;
    }

    how can I make it work for this.

    Please help

    Here is my code

  26. Hi Aaron,

    Thank you for emailing me the solutions “changing the id in the a tag to a classing” within minutes of me posting the question. Aaron I would like to buy you a drink for posting this css hack and for the quick response to my question. Please email me your Paypal account. You should have also a donate button on your website for solutions like this that you provide, unless you are already rich and are only doing this for love and not money :-)

    Joe

  27. Where I have to put the html code /link/. I use wordpress theme and when I put it in the index.php or header.php and set the size of background image this size is top of the site and not see under the menus but top of them.
    Example: My background image is 2000 px height and in the top of the site have 2000 px height of empty space /only background image/ and then show the site.

  28. Has anyone tried to do this with a rollover background?

    As in a button (60px high with a no-hover and hover upper and lower half) styled like so:

    li.about {
    background: url(images/ab.png) left no-repeat;
    background-position: 0 0;
    }

    li.about:hover {
    background: url(images/ab.png) left no-repeat;
    background-position: 0 -30px;
    }

    I tried a few things out on my desktop

  29. Dear aaron..

    according to your trick, can you tell me how to put a link to an image which set as text box background ( like google search engine text box ) ?

    thnx in advance..

  30. so, i’ve followed these steps, and the text link works, but the image block does not. i cannot figure out the problem. i’ve used this process on the same page that i’m currently working on and haven’t had problems with those links. not sure how much more troubleshooting i’m capable of. help please!

  31. Hi there

    I made a button and converted to a .png to keep the effects (Shadow). How do you add .png up-state and over-state link? I can get to work a up-state but over-state is not showing on my one?? I am using FF, IE to test them.

    Thanks in advance
    CHEERS :)

  32. What Antonio asked
    I’ve read and re-read and tried and tried and now I need assistance please.
    Is there anyway to make the body background clickable.
    I’ve added my CSS below.

    Thanks and hope the Holidays went well.

    body {
    color: #F2EEE9;
    background: url(images/bg.jpg) no-repeat fixed center top;
    font: 80% Arial, Tahoma, Verdan, sans-serif;
    }
    #body-container {
    width: 100%;
    margin: 1px auto 0 auto;
    padding: 0 10px;
    }
    #extra-container {
    width: 942px;
    margin: 2px auto 0 auto;
    padding: 0 10px;
    }

    • Use my example:

      background-link

      CSS:
      body.bgstyle {background: #F2EEE9;}
      body.bgstyle #main-background {
      position: relative;
      background: url(../images/backgrounds/bgstyle/bgimage.jpg) 50% 0 no-repeat;
      }

      body.bgstyle #background-link {
      position: absolute;
      height:11000px;
      text-indent:-9999px;
      width:1440px;
      top: 0; left: 0;
      border: 0;
      float: left;
      }

      • Ups, the html code was cleared, I had to change the braces with ^:

        ^body class=”bgstyle”^
        ^div id=”main-background”^
        ^a href=”http://url.com” title=”some title” id=”background-link”^ background-link ^/a^

        • Oh my gosh! I love you! I used the second part under my body element and changed the id selector to “background-link”. Been trying to figure it out for ages. Seriously, love you.

          body #background-link {
          position: absolute;
          height:11000px;
          text-indent:-9999px;
          width:1440px;
          top: 0; left: 0;
          border: 0;
          float: left;
          }

          • Dah! I spoke to early. The linked background sits below my container instead of behind it, meaning you have to scroll down past all the content to get to the linked background. Any suggestions?

            body {
            background-image: url(‘images/bg.png’);
            background-position: center top;
            background-attachment: fixed;
            }

            #background-link {
            height:5250px;
            display:block;
            text-indent:-9999px;
            width:1440px;
            top: 0; left: 0;
            border: 0;
            float: left;
            }

            I didn’t use position: absolute in the #background-link because when I tried that, it set the ENTIRE website as one giant link.

          • make it exactly as my example and it will work, change only the image path an the bg color.

            ^body class=”bgstyle”^
            ^div id=”main-background”^
            ^a href=”http://url.com” title=”some title” id=”background-link”^ background-link ^/a^

            CSS:
            body.bgstyle {background: #F2EEE9;}
            body.bgstyle #main-background {
            position: relative;
            background: url(../images/backgrounds/bgstyle/bgimage.jpg) 50% 0 no-repeat;
            }

            body.bgstyle #background-link {
            position: absolute;
            height:11000px;
            text-indent:-9999px;
            width:1440px;
            top: 0; left: 0;
            border: 0;
            float: left;
            }

          • The top block TOTALLY messes up my website. There is no background image (I used the right url) and everything is all jumbly. I tried using my top block, your bottom block, and your html and again it set the entire website as one giant link.

    • You can do that EXACTLY as I outlined in the article above, with no changes at all. However, that means that you will need to adjust your stylesheet and at least one more theme file (assuming that your theme has done things right, that would be header.php).

      • Aaron,

        Sorry if this is a stupid question…. but where do I put the a tag? Does it go in the style sheet? Where?I’m using wordpress so it’s confusing, thanks.

  33. Thanks Aaron, good stuff.
    Broader question. Why doesn’t .css have a simple image link, one that doesn’t require tricks?
    Secondly, I usually put my image/path in my .css external pages. This makes
    me go back to the html side again.
    Good solution, don’t get me wrong, but seems that w3c should have included an image link.

    Just curious.
    Bumper

  34. Excelent article Aaron!, it really help me to solve a problem. I didn´t know how to link background images… Naturally I have research in Google and xavisys was first position to give me the solution :-).

    Thanks a lot !

  35. hello… i really dont understand what i am doing wrong. :( can;t make it work. i’m new to css and everything. I tried to put the css and html on the index, header, stylesheet php.. still wont work. this is the site
    http://fikafikafika.com

    any recommendations ? i’m using the emptiness theme on wordpress.

  36. Uh, talk about a huge waste of time. All you have to do is put the background image in a div, then wrap it in your href. Presto, a background image that’s a link. And unlike your version, it doesn’t require a ton of unnecessary code. And also unlike yours, it actually works.

    • First of all, the one above DOES work, and is in use on many sites. However, putting a background image on a div that is wrapped in an a tag is not valid HTML (a tags can only contain inline elements and div is a block level element – http://www.w3.org/TR/html401/struct/links.html#edef-A). Additionally, unless you add some additional code to set the size of the div to match the size of the image…it won’t work.

      Basically, doing what you said with no additional steps won’t work, and even if you get it working it would be invalid.

  37. I’m trying to make my website background image a link and I got that to work, but it pushes everything else (basically my entire website) below the image/link block. I noticed that this happens when I enter a “#” to the css, which didn’t used to have one. Any suggestions on how to alter my css?

    body {
    background-image: url(‘images/bg.png’);
    background-position: center top;
    background-attachment: fixed;
    display:block;
    height:1000px;
    width:1600px;
    }

    ps – I didn’t include the text indent because it makes my entire header disappear for some reason.

  38. I know this example is to have the background image without the text visible.

    I want to know the best way to actually display text, precisely positioned within the div block. I have tried using padding but that expands the bounding box of the div, and the clickable area. I also played around with text-indent and line-height but they didn’t really suit.

    I actually tried putting the text inside another div and positioned it accordingly and, although this isn’t W3C compliant, it passed validation and works in all browsers.

    What are your thoughts?

      • If you play with line-height for up and down, and padding for left and right you can get whatever alignment you want. Just remember that if you add left/right padding you need to subtract that from the width.

        • Thx for the reply Aaron. Of course, the width/height can be adjusted to match the size of the image. Duh.

          If I wanted to use 2 differently formatted text blocks within this same div, is there a way to do this?

  39. Why not use something like? In the CSS, define style=cursor: pointer and on the DIV add a onclick event.

  40. Hi all,

    Ive tried this (and 11 other) solutions to make my website logo 134x134px clickable.

    No luck yet…

    Could someone, anyone maybe help me out a bit? I’m kind of a beginner at php/css and this wordpress website is my first big website project I’ll do on my own.

    My current code is:

    —– header.php

    <a href="” title=””>

    —– style.css

    div#logo { background: url(images/image.jpg) no-repeat;
    position: relative;
    display:block;
    width: 134px;
    height: 134px;}

    #header { width:980px; margin:0 0 80px 0; }
    #header #logo { float:left; width:135px; margin:0 50px 0 0; }
    #header #logo h1 { visibility: hidden; text-indent:-9999px; font-size:54px; font-weight:normal; margin:0; letter-spacing:-2px; }

    / With this, the logo is at least visible, and the website title and subtitle are hidden, which I wanted…

    Now if I could only make the background image clickable….the site would be done…

    Annyone?

    One little tip could save me days of work :)

  41. Hi, css newbie here.

    My site, http://shopsiljan.com/, currently fills the entire page. How do I make the image link function fill the entire page as well. When I try to use the script I just keep cropping the image. Obviously I don’t know what I’m doing and any help would be greatly appreciated.

    Siljan

    * { margin: 0; padding: 0; }

    html {
    background: url(wp-content/plugins/underconstruction/kyrkahome.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    }

    • I checked in several browsers just now and it looks fine everywhere. The closest I can come is with JavaScript disabled on Chromium, but even in that case some of the code is hidden behind the sidebar. What browser are you on and why doesn’t it have JavaScript enabled?

      • Thank you for pointing me in the right direction :) I didn’t like the dotted outline that ran off of the page because of the indent. So here is my revised version of what your trick.

        Perhaps there is some downfall to my method, but I could not find one. If someone finds any issues with this, please reply to my comment so I will be updated. Thank you.

        Here’s what I did…

        I implemented this as a class in the link:

        http://somesite.com

        Place the above where you wish insert the logo or even any image, really.

        I used style=”color:transparent;” (Otherwise the link will show.)

        .example {
        background: url(http://somesite.com/logopath/logo.jpg)no-repeat;
        text-align: center;
        display: block;
        width: px;
        height: px;
        outline: none;
        }

        I used text-align: center; (in case you would prefer to show the link over the image. This is useful for me as I do use it that way sometimes. I just remove the inline color:transparent; in that case.)

        width and height needs to match the exact dimensions (in px) of the image you are using.

        outline: none; is to remove the dotted line that surrounds links when you click on them.

        Further note:

        You do not need to specify any text HERE for this to work. In this case, you won’t need to use color:transparent; in the

        I guess by not using text or a link in between, search engines might not index it? I don’t really know.

        I hope this helps someone.

        • Oops, I forgot the code tags.

          Thank you for pointing me in the right direction :) I didn’t like the dotted outline that ran off of the page because of the indent. So here is my revised version of what your trick.

          Perhaps there is some downfall to my method, but I could not find one. If someone finds any issues with this, please reply to my comment so I will be updated. Thank you.

          Here’s what I did…

          I implemented this as a class in the link:

          http://somesite.com

          Place the above where you wish insert the logo or even any image, really.

          I used style=”color:transparent;” (Otherwise the link will show.)

          .example {
          background: url(http://somesite.com/logopath/logo.jpg)no-repeat;
          text-align: center;
          display: block;
          width: px;
          height: px;
          outline: none;
          }

          I used text-align: center; (in case you would prefer to show the link over the image. This is useful for me as I do use it that way sometimes. I just remove the inline color:transparent; in that case.)

          width and height needs to match the exact dimensions (in px) of the image you are using.

          outline: none; is to remove the dotted line that surrounds links when you click on them.

          Further note:

          You do not need to specify any text HERE for this to work. In this case, you won’t need to use color:transparent; in the

          I guess by not using text or a link in between, search engines might not index it? I don’t really know.

          I hope this helps someone.

  42. thank you for this great advice!! it works just like you said!! i sued it on my profile pge on one of my sites and it links to the other site! i like it!! i had an image before that but with no link!! but this is just what i ws looking for!! i am going to have to sign up on here just because of that! thank again!

  43. Nice little trick Aaron; thanks! I’ve used it on a couple of my sites.
    A couple notes for people concerned with the dotted lines – try adding overflow:hidden to your css. That seems to take care of the problem in Firefox.
    Also, if you’re concerned with the negative indent and the impact it might have on Google searches, you could try giving the text a high line-height (line-height:400px) instead of the negative indent; and don’t forget to also include the overflow:hidden. A quick test of this seems to work in FF, IE9 and Chrome. And I’m only assuming that this gets around the Google SEO issue, but it could be worth a try.

  44. All these comments are very confusing. Where’s the image? Isn’t there supposed to be an image to click on? I mouse over the blank space “make a clickable background image like this:” and there’s nothing. I mouse over “And the finished product looks like this:” and there’s nothing — although the cursor does change to the pointer, but there is no image. I’ve looked at chrome, ff and ie. where is the image???

  45. Excellent post! I got it to work, but now I have two images. Have any idea why?

    http://craftyhippotestblog9.blogspot.com/

    #AboutMe {
    background: url(http://webzoom.freewebs.com/ouralaskaadventure/QLand/AboutMe2.png) no-repeat;
    display:block;
    text-indent:-9999px;
    width: 339px;
    height: 339px;
    margin: 250px 0px 0px 750px;
    }

    I have this image placed in the outer wrapper so it can overlap the sidebar. That’s the only way I could figure out how to make it do that. I imagine that might be my problem, but I don;t know how else to make it overlap and not cut off. Thanks for any insight you might have on it.

  46. Thank you! Works great!
    For some reason, the text-indent didn’t work when I copied/pasted your code. It worked when I retyped that line of code. Hope this helps someone.

  47. Nice tricks Aaron – thank you! Pleace help me with my problem.

    I dot want to get rid of text. In fact I need it neatly placed over an image which looks like a shop cart button. I want dynamic text to say for ex. “3 products in your cart”. I am an experienced ASP.NET developer, so pulling the number of products from DB is not a problem for me. But I am not very CSS inclined and polished.

    So far I removed text-indent:-9999px;

    and in order to place the text where I need it I used

    padding:10px 0px 0px 12px;

    which placed the text fine but also increased the clickable area by 10pxs to the bottom and 12pxs to the right. Only when I decreased the image size into the CSS code by 10 pxs from the height and 12 pxs from the width I got the clickable area to be only over the image. Seems like the padding adds pixels to the real image size.
    All is fine. I tested it with IE, FF, Chrome and there is no problem. But I am still irritated as of what really is going on.

    Best regards from Bulgaria.

    • So with the standard box model the actual width of an element is the width you set + padding, and margin is OUTSIDE the box (same with height). So if you need to use padding, the width and height should be the desired width/height – the padding.

  48. Hi,

    Love your link, it works well but I need a link for a background image that is on the right side of the header, and covering the search box in my twenty eleven child .

    Where do i put the html code inside the header.php?

    I can add it to the left of the page by adding the code in the , but not on the right. Since my logo is over the search form.

    this is the css:

    #branding #searchform {top: 4.8em;} /* moves search down slightly */
    #branding hgroup {
    background: url(“images/open2.jpg”);
    background-repeat: no-repeat;
    background-position: 100% 0px;
    }

    Can you please help me?

  49. Greetings, I do believe your site could possibly be having web browser compatibility problems.
    When I take a look at your blog in Safari, it looks fine
    however when opening in IE, it’s got some overlapping issues. I simply wanted to provide you with a quick heads up! Other than that, wonderful blog!

  50. hi, i used this code based on your

    #banner {
    background-image:url(images/menutop.gif);
    background-repeat:no-repeat;
    background-position:top left;
    display:block;
    height:100px;
    width:320px;
    }

    it owrks great, but if you set background image property in the BODY tag then my banner gets positioned at absolute top left of the page (no white space) but using your method theres white space at top and left of image. SO how do i position it absolute top left with no gaps.??

    • Position absolute will position the item absolutely in relation to the first ancestor that has position:relative. So you probably have an ancestor tag that has position:relative set or implied (it’s a browser default for some tags). Try putting #banner inside only the body tag and no other wrappers, and then make sure the body tag doesn’t have any margin or padding set because it’s going to be position:relative.

  51. Aaron, I just came up with a different solution than yours. Hope this helps.

    Same window: onmouseover=”this.style.cursor=’pointer’;” onclick=”window.location.href=’http://www.extore.com/’” onmouseout=”this.style.cursor=’default’;” background=”http://www.extore.com/images/header1.jpg”

    New window: onmouseover=”this.style.cursor=’pointer’;” onclick=”window.open(‘http://www.extore.com’);”
    background=”http://www.extore.com/images/header1.jpg”

    Regards,
    Nate

    • You could use JavaScript to make the element clickable, but you can also do it in pure CSS/HTML like in the article. No reason to use JavaScript if you don’t need to! Also, if you do use JavaScript, I would recommend looking into listeners and not using the onmouseover or onclick (or on* for that matter) attributes.

Leave a Reply

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