How do you make a background image clickable with CSS?

Answer 1

1) It's impossible to make a background image a link with CSS.

2) That's not what CSS is for.

------------

However, you could make an invisible block with CSS and wrap it in an HTML anchor.

CSS Example:

.invisibleblock {

/*make it invisible*/

-moz-opacity:0; filter:alpha(opacity=0); opacity:0;

/*fill the container its in (change this to px if you have a specific size)*/

width:100%;height:100%;

/*z-index, for ensuring its behind everything else*/

z-index:1;

/*Extra bits in case it's not working properly*/

display:block;border:0;margin:0;padding:0;

}

You could alternatively give this block the background image and make it visible, but this doesn't work well with a body background.

In the HTML, use an 'a' tag pointing to the page you need on that image, eg.

Note:You will have to use z-index for everything that will be in front of that invisible block for it to work correctly. It will need an index greater than 1, with the highest index being in front of everything else.

If this was on the body background, then you could add

around the rest of the webpage.