SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    .scrollable {
      height: 102px;
      overflow: hidden;
      position: relative;
      width: 637px; /* change to 495px */
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <body>
    <div id="top"><a href="#"></a></div>
    Then apply these styles:
    Code:
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by horatiub View Post
    So should I just cut the background image to fill the top of the page then place a new div above the main container?
    Yes that sounds ok.

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <!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.)


Bookmarks

Posting Permissions

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