...

View Full Version : Layering div tags



iSquirrelly
11-18-2010, 02:08 AM
Hi, I am trying to set an image as the background image and then make it a clickable link, the image is set and looks fine, but the link doesn't work properly.


.background {
height: 100%;
width: 100%;
position:fixed;
z-index:-5;
}
<a href="http://google.com"><span class="background"></span></a>
I can get it to work where it is clickable but it is over top of the content on the page. I then set the z-index to -1 and it becomes non clickable because for some reason the container shows as the whole page width but is set to 960px.
Any recommendations to fix it or other solutions?

DrDOS
11-18-2010, 02:52 AM
That's exactly how the z-index works. You can use a transparent foreground image (gif) or a transparent div over the page to get clickability. It would be better if we knew exactly what you are trying to do, what do want clicked on, and why use the background image.

iSquirrelly
11-18-2010, 03:05 AM
Hi, I'll try to be more clear, it's quite confusing, have you ever been to IGN or ninja kiwi where the background is a clickable advertisement that goes to another website? It isn't on either website right now but on IGN (http://www.ign.com/) they have a picture of dragons on both sides of the content. Is there a way to make that clickable?

santhoshj400
11-18-2010, 04:45 AM
Hi, I am trying to set an image as the background image and then make it a clickable link, the image is set and looks fine, but the link doesn't work properly.


.background {
height: 100%;
width: 100%;
position:fixed;
z-index:-5;
}
<a href="http://google.com"><span class="background"></span></a>
I can get it to work where it is clickable but it is over top of the content on the page. I then set the z-index to -1 and it becomes non clickable because for some reason the container shows as the whole page width but is set to 960px.
Any recommendations to fix it or other solutions?
Hi,
try with this ,
.back
{
background:url(images/fish.jpg) no-repeat;
height: 100%;
width: 100%;
position:relative;
z-index:-5;
}
<a href="http://www.google.com"><div class="back">any text on image goes here</div></a>
i think there is problem in providing Z-index position fixed must be changed to position:relative for giving z-index



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum