CODEWITHSUNDEEP
jquerycss
JCHASE11
JCHASE11

Reputation: 3941

Making Entire background-image clickable

I am fixing up a friends website, and he has an advertisement that takes up the entire background (body). Currently, the background image is set using CSS (background-image):

body {
background-attachment:scroll;
background-color:#000000;
background-image:url("http://gunshyassassin.com/wp-content/uploads/2010/10/gunshy_takeover2OUTNOW4.jpg");
background-position:center top;
background-repeat:repeat-x;

I would like the make the entire background image clickable (a link). You can see the site here: http://gunshyassassin.com

What is the best way to go about this? Seems so easy, but after a days work, I am blanking! It is important that the main content area will not be affected (eg we cannot set the entire body to be a link or else all of its children will also be clickable, which is a no-no) I just need the body background image to be a link!

Upvotes: 0

Views: 2344

Answers (2)

700 Software
700 Software

Reputation: 87783

Make the part that should not be part of the ad have this style: 

position:relative;left:0;top:0;z-index:1

Make link to the other site like this:

<a style="display:block;position:fixed;left:0;top:0;width:100%;height:100%;cursor:pointer" href="http://adsite.com"></a>

Upvotes: 1

mway
mway

Reputation: 4392

Well... in ''theory''... you would just have a div (which either has the image as a background image, or as an <img> within it) at 100% width and height, positioned absolutely behind the content, and then add an event listener to that div. But I really would advise against making your whole background an ad - it's annoying and obtrusive.

Upvotes: 0

Related Questions