How to hyperlink background image

How to hyperlink background image.

We have a header section which is having no. of div styling etc. One div is having CSS background image assigned to it and we need to make it hyper link.

Any suggestions

Its a big image and we have no. of content over it (logo, text etc) and this img is bg img. Now i wanted to hyperlink some section of it :slight_smile: wired i know

After looking at the suggestions i think my question is odd and dont have answers because we are breaking the rules.

I’m using a stylesheet to place a small ‘background image’ in the; > upper left corner of several pages. Is there a simple way of making; … A solution which relies on image loading and css will fail when browsed by Lynx. A solution that relies instead on floating the image, and making that a hyperlink, will not fail…


Make the anchor position absolute and give it a height/width and left/right.

I presume it’s your logo!

/* whatever the width etc.. */

#header .logo {
/* whatever the width of logo */  

#header .logo a {
/* whatever the height of the logo; whatever the margins you want to use; */ text-indent:-9999px; background: url(/* your background image */) no-repeat;  

and then your html:

<div id="header">
    <div class="logo">
    <a href="#" title="">Your text</a>


Hope this helps

If its a link, then you need some content to tell the user where the
link goes. If its content, it should be in the HTML, not in the
presentation layer. Use an <img> instead.

Thanks thought but not complete block and all its content but only few are of the image is required to be hyperlinked

Make the anchor display block and give it the demensions of the div.

I have recently made the static images on my site into sprites and here is the code for a sprite background image which is linkable:

<!-- the CSS -->
.fll {float:left}
.dib {display:block}
.sprites {{background-image:url(/afiles/images/sprites.jpg);background-color:transparent;background-repeat:no-repeat}}
#jb_still_gif	{width:62px;	height:122px;	background-position:-834px -0px}
#twitter_logo_header_png{width:69px;	height:16px;	background-position:-677px -0px}

<!-- the new code -->
<a href='' id='twitter' onclick="newLocation()">
  <strong class="fll dib sprites" id="jb_still_gif">
  <br />
  <strong class="fll dib sprites" id="twitter_logo_header_png">
  <br />
  me for 
  <br />

<!-- the old code -->
 <!-- img src="/afiles/images/jb_in_shorts.gif"  style='border:0;float:left; width:62px;height:122px' alt="JB in red shorts" / -->

If you happen to visit the site then check the loading time in the bottom right-hand corner. Sprites make a big difference.

You can’t make a background image hyperlinkable - that’s why it’s in the background. Any images that you want to be clickable should be part of the content, and so in place with <img> elements.

Hey, I’m not sure if this will help, but it could be worth a try. Its some jQuery which allows you to make block elements clickable.

Its from this article: