Making background images linkable

**Hans G.** · 02-15-2008, 03:24 PM

Hi folks! I'm building a Website in CSS and am pleased with everything I have done thus far. I have a background image on every page whose appearance is powered by a CSS file, which I call background.css, and sits in my css folder.

So the code on the html page reads: <link rel="stylesheet" type="text/css" href="css/background.css"/>

The code inside this file reads:



I'm happy with everything, now I just need to make this background image linkable. I would like for people to click on this background image and have them go to the homepage, "mywebsite.com." How can I do this? Also, because this is a background image, it doesn't come out in print outs like all of the other images. Is there a way for a background image to show up in print outs?

**Gilligan** · 02-15-2008, 06:29 PM

A background image is an image used for presentation.

BUT, you could use a transparent div which would be click able, basically overlapping but still displaying your background.

so

Code:

 <!--
body { background-image: url(http://www.mywebsite.com/images/main-image.jpg); background-repeat: no-repeat; background-position: center top}
-->

.transp {position:absolute;left:0;top:0;z-index:9999;
background-color:transparent; width:REPLACE; height:REPLACE;}

Replace the width and height with the dimensions of your background image

the html

Code:

<div class="transp" onClick="go('http://www.mywebsite.com')"><p>&nbsp;</p>

**Gilligan** · 06:34 PM

Some problems with my code. Here's an updated working one.

First the CSS

Code:

body { background-image: url(http://www.mywebsite.com/images/main-image.jpg); background-repeat: no-repeat; background-position: center top}

^ Sets the Background of the page ^

Code:

.transp {position:absolute;left:0px;top:0px;z-index:1;
 background-color:transparent;width:100%;height:100%; cursor:pointer;}

^ The transparent div. 'z-index:1' is IMPORTANT if you want only the background to link. ^

Code:

#content {position:absolute; z-index:2}

^ A basic div for your page, i've only set two parts two it, of course you may add to it, but DO NOT remove the two parts or else it will make the whole page a link. You may edit the z-index, but it must stay at least 2. ^

Now the HTML

The following codes would be in between the <body> tags

Code:

<div class="transp" onclick="location.href = 'http://yoursite.com';" ></div>

^ Makes it a proper link this time. Make sure you end the div tag before you open another one^

Code:

<div id="content">Some content</div>

^ Some content, this will overlap the background thus not be a link ^

**Gilligan** · 06:36 PM

Not working in IE

But a simple hack should do the trick.

Replace:

Code:

<div class="transp" onclick="location.href = 'http://yoursite.com';" ></div>

With:

Code:

 <div class="transp" onclick="location.href = 'http://yoursite.com';" ><!--[if IE]>
<img src="transp.gif" width="100%" height="100%" />
<![endif]--></div>

Just puts a transparent image covering the whole page. Which makes it a link.

Of course you must actually HAVE the image in the same folder. Heres the image to download, because its 1px by 1px, (right click and save the link as a gif file)

http://gks.uk.com/w332s/bgclick/transp.gif

I also made a few examples.

LOOK AT THE SOURCE CODE FOR MORE DETAIL

Version 1
Version 2

**Tom_M** · 11:16 PM

You can give an anchor the specified width and height of a background image and display it as a block level element.

Some simple CSS:

Code:

a {
	width: 100px;
	height: 100px;
	background-color: red;
	display: block;
}

a h3 {
	display: none;
}

Just change the width and height to that of your background image. And I just used the red BG so you can see it.

Some HTML:

Code:

<a href="#"><h3>Test</h3></a>

**Hans G.** · 02-21-2008, 03:07 PM

thanks, guys!! good work!

**Gilligan** · 02-21-2008, 07:25 PM

Sure, enjoy