Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layering div tags

    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.
    Code:
    .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?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,030
    Thanks
    15
    Thanked 240 Times in 240 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 they have a picture of dragons on both sides of the content. Is there a way to make that clickable?

  • #4
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by iSquirrelly View Post
    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.
    Code:
    .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
    Last edited by santhoshj400; 11-18-2010 at 04:49 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •