How to make a clickable background with a transparent gif

I am trying to make a background image being clickable.

Here is the CSS code I have so far:

body { background:#2f2f2e url (img/background.jpg) top center no-repeat; margin-top: 275px; color:#333; font: 12px Arial, Helvetica, sans-serif;}

Then the HTML code in header:

<div id=“main_container”>

content
</div>

I read somewhere that a transparent GIF can be added, the same size as the background.jpg and add an HREF to it. But question is: where do I add it? In the main container?

Thank you

You can’t make a background image clickable. It’s background. If you want something to be clickable, it has to be part of the actual content. If you want to make an image clickable, the easiest and best way is almost always to use the <a href=“…”><img src=“…” alt=“…”></a> format.

So I understand that, and yes, in the body tag, you cannot have an href. But I kept hearing that you can use a transparent GIF in the content section of the site that starts in the header, so essentially the GIF will have the same size as the background image, so therefore it’s clickable.

The whole purpose of this is to create a homepage takeover with the top part being clickable.

I think maybe you need to explain in a bit more detai what you are trying to do. You could have a transparent gif in the HTML that sits over the top of the web page and is clickable, but it’s not a background image. Still, though, it’s not clear what you want this for. Sounds like it could be confusing for users.

As said above you will need to clarify what you are trying to do but you can simply create an anchor and place it over the background that you want to be clickable. There is no need for a transparent gif.

Just set the anchor to display:block and size its dimensions to match the background and then place it into position by margins or absolutely placing it if needed. (It’s not the best way to do something like that though as it’s not a very accessible technique as the anchor is empty and provides no hint as with real content. Use an image replacement technique (Gilder Levin) or just use an image unless his is some kind of image map technique.

Your code seems a little strange though as you would rarely set a top margin of 275px on the body element.

Here is the link to the development environment http://bit.ly/exJAyN

So essentially, would like to make the homepage takeover banner a clickable link.

Rather than have that top image as a background image, I would at least chop it off from the rest of the background and create a top header div 1280px wide and place the image inside that div and wrap a link around it.

It’s a shame to have all those words in an image, though, as it makes them inaccessible. At least include the essential info in your image’s alt attribute.

With the remaining background image just a plain color, you can make it much smaller (or just use acolor value) and fill the entire background with that color, which would look much better on big screen anyway.

BTW, your image slider further down is somewhat broken. You need to change the width here:

.scrollable {
  height: 102px;
  overflow: hidden;
  position: relative;
  width: 637px; [COLOR="Red"]/* change to 495px */[/COLOR]
}

ok, I assume you want that 275px top part of that body background image to be clickable?

If so then just add an element into the page:


<body>
[B]<div id="top"><a href="#"></a></div>[/B]

Then apply these styles:


body{margin:0}
#top{
    width:1280px;
    height:275px;
    margin:auto;
}
#top a{
    display:block;
    width:1280px;
    height:275px;
}

Of course that will make the page wider than it is at present but you can’t have the area clickable unless it has the same dimension of course.

As I mentioned above (and by Ralph) you would be better off with the image in that element itself and use some sort of image replacement technique which will allow for some text to be present in the html for accessibility.

So should I just cut the background image to fill the top of the page then place a new div above the main container?

This is only for a week anyway, just a short promotion.

the 275px part was used to place the header below the background image

Yes that sounds ok.

So went with the regular suggestion, but for the future, how can we accomplish the task for having a background image and then make it clickable? It seems to me that the design looks better when the container sits on top of the image.

Hi,

If you are doing an image replacement type of thing then something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.replace, .replace a, .replace span {
    width:300px;/* height and width of your image*/
    height:300px;/* " " */
    margin:0;
    display:block;
    position:relative;
    overflow:hidden;
    text-decoration:none;
}
.replace span {
    position:absolute;
    top:0;
    left:0;
    background:red url(img.gif) no-repeat 0 0;
}
</style>
</head>
<body>
<h1 class="replace"><a href="#">Descriptive text for accessibility<span></span></a> </h1>
</body>
</html>

(Only works for non transparent images otherwise the text underneath would show through.)