ansaurus

Question

How do I add a hyperlink to a background image?

Answer 1

+3 A:

You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.

Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:

<a href="#"><img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" /></a>

But, if you must use it as a background image, than creating an additional class is the way to go.

Russell Dias 2010-09-23 13:07:04

Answer 2

A:

You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the tag, obviously.

** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:

$(document).ready(function(){

$("body").click(function(){
  window.location='http://www.yoururl.com';
});

});

TheGeekYouNeed 2010-09-23 13:07:22

That's invalid HTML. You cannot have `div` in anchors

Yi Jiang 2010-09-23 13:08:26

Like Yi said, you can't wrap a block-level element with an anchor tag. The only way to do it this way is to add a click handler to the div, as in my answer.

Skilldrick 2010-09-23 13:11:40

Answer 3

+1 A:

You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.

You'd have to do something like:

<body>
    <div id='background' onclick='window.location.href="mynewurl"'>
        <!-- Rest of page goes here -->
    </div>
</body>

Also, add cursor: pointer to the css for the background div so people know it's a link.

Skilldrick 2010-09-23 13:09:50

Thanks very much! But now there's that white space on the top bottom and the page menu itself. http://thehypebr.com/

cuberds 2010-09-23 13:23:13

Don't do `"onclick="window.location.href="http://boundlessny.com/clothing""` - do `"onclick='window.location.href="http://boundlessny.com/clothing'"` - i.e. nest single quotes inside double quotes.

Skilldrick 2010-09-23 13:33:05

Add `width: 100%;`

Skilldrick 2010-09-23 13:33:56

Answer 4

+1 A:

OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.

Make clear gif's the same size as your cream boxes
Put those images in something like this <a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a>
Use CSS to make the a tag a block element and place it over the cream boxes in the background image

I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.

This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.

Nicknameless 2010-09-23 14:04:03

ansaurus

tags:

views:

answers:

How do I add a hyperlink to a background image?

related questions