How to hyperlink background image

Get Started
1

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

2

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.

3

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…

Thanks

4

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

5

I presume it’s your logo!


#header{
/* 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>
    </div>

</div>

Hope this helps

6

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.

7

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

8

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

9

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='http://twitter.com/Johns_Jokes' id='twitter' onclick="newLocation()">
  <strong class="fll dib sprites" id="jb_still_gif">
  </strong> 
  <br />
  <strong class="fll dib sprites" id="twitter_logo_header_png">
  </strong> 
  <br />
  me for 
  <br />
  updates
</a>

<!-- 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.

10

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.

11

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.

http://www.webdesignerwall.com/demo/jquery/block-clickable.html

Its from this article: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/