SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link Background Image

    Hi folks,

    I haven't been working with CSS very long and am still learning about how to incorporate it into my website. I have a project that has a large background image that sits behind the content on my website. The issue I'm having is that I also need to allow users to click the background of this (either to the left or the right side of the content). I've searched high and low and found a couple different solutions but they either don't work period or it makes it so that the entire page (including the content in the forefront) now contain the background image link.

    I've scrapped all of the tests that I previously had trying to do this because none have worked for me. I'm looking to just start fresh with it (which is why I don't have any code to show you). I'm not very CSS savvy at the moment, so If I've lost anyone, I've included a picture example of what I'm trying to do. All I ask is that someone help me understand how to do this. Much appreciated.
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean when you say you want the users to be able to click the background, what do you want to happen when the background is clicked?

    The example img is still pending approval so I couldn't view it atm.

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The background image will link them out to another page. For example, if someone clicked on the background page, it would take them to Google or something.

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bgodfrey View Post
    Hi folks,

    I haven't been working with CSS very long and am still learning about how to incorporate it into my website. I have a project that has a large background image that sits behind the content on my website. The issue I'm having is that I also need to allow users to click the background of this (either to the left or the right side of the content). I've searched high and low and found a couple different solutions but they either don't work period or it makes it so that the entire page (including the content in the forefront) now contain the background image link.

    I've scrapped all of the tests that I previously had trying to do this because none have worked for me. I'm looking to just start fresh with it (which is why I don't have any code to show you). I'm not very CSS savvy at the moment, so If I've lost anyone, I've included a picture example of what I'm trying to do. All I ask is that someone help me understand how to do this. Much appreciated.
    Since the attachment is still pending i'm only guessing here but maybe this is what you want:

    start with a regular link but give it an id as css hook:

    Code HTML4Strict:
    <a href="http:/blabla.com" title="blabla" id="test">blabla</a>

    Now for the css part: start by adding the background image and make the link the same size as the image, so you can see the whole image. Because an anchor tag isn’t a block level element, you need to set it to display:block in order to specify the size:

    Code CSS:
    #test {
    	background-image:url(path to image);
    	display:block;
               height:your px;
               width:your px;
    }

    You should now have the link showing up with the background image underneath it.

    You need to hide the link:

    Code CSS:
    #test {
    	background-image:url(path to image);
    	display:block;
               height:your px;
               width:your px;
               text-indent:-9999px;
    }


    The text-indent will move the text out of the viewport and you will be left with the background image only that's clickable.

    Is this what you want?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your assistance. It's not quite what I'm looking for.

    Since the attachment isn't showing yet, I can probably just throw out a couple links that look like what I want. There's a company called Ad Camo that provides what's called Projection Background Ads. The image sits in the background and when clicked will link the user out to a new site.

    adcamo [dott] com

    A site that has something like this right now would be wwtdd [dott] com.

    So literally what I'm looking to do is:

    - Have a background image that can be clicked and linked out to another website. The background image must sit behind the main content though. So it would look something like:

    Background | Main Content | Background

    With the example you gave, it looked something like this:

    Background - at the top of the page
    Main Content - below the background image

    - The background link cannot overlap onto the main content because there's links on the main content as well.

    I hope that makes more sense.

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see.... looks to me that you could place the main content at the top by using z-index. If you're not familiar with how to do it, this will make all cristal clear.

    By using z-index you'll be able to lay the content over the background.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I was able to lay the content over the background, but for some reason the link is not showing up. Here's what I have:

    Code:
    <a id="test" href="http://www.example.com"></a>
    <div align="center" class="outercontainer">
    The div is where I have the content sitting on top of the background.

    Code:
    #test
    {
    	position:absolute;
    	background-image:url(thebackgroundimage);
    	background-repeat:no-repeat;
    	background-position:center top;
    	display:block;
    	height:100&#37;;
    	width:100%;
    	top:0px;
    	left:0px;
    	text-indent:-9999px;
    	z-index:1;
    }
    .outercontainer
    {
    	position:static;
    	z-index:2;
    }
    Now everything is sitting properly, but when I put my cursor over the background, there's no link showing.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That's because the text-indent

    ALso, position:static is default, and z-index doesn't work with position:static anyway
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi bgodfrey, Welcome to SitePoint!

    This should get you pointed in the right direction.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Linked Background</title>
     
    <style type="text/css">
    body {
        background:#333;
        font-size:100%;
        margin:0;
        padding:0;
    }
    html, body {height:100%;}
     
    #bg-link {
        position:absolute;
        left:0;top:0;
        width:100%;
        height:100%;
        font-size:30px;
        color:#FFF;
        text-indent:-999em;
    }
    #bg-link:hover {
        background:#000;
        text-indent:0;
    }
    #wrapper {
        width:600px;
        margin:0 auto;
        min-height:100%;
        background:#BBB;
        overflow:hidden;
        position:relative;/*stack wrapper above the AP'd Backround anchor*/
    }
    h2, p{margin:1em; font-weight:bold; text-align:center;}
    </style>
     
    </head>
    <body>
    <a id="bg-link" href="http://www.google.com/">Go to Google</a>
     
    <div id="wrapper">
        <h2>Linked Background</h2>
        <p>You can always get help at the <a href="http://www.sitepoint.com/forums/forumdisplay.php?f=53">Sitepoint CSS Forum</a></p>
    </div>
     
    </body>
    </html>

  10. #10
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    That's because the text-indent

    ALso, position:static is default, and z-index doesn't work with position:static anyway
    Ok, so I removed the text-indent. I also changed the position to absolute but now I have a new issue. Instead of the content sitting in the center of the page, it's completely to the left. I'm pretty sure that's because of the left:0 but I need to have it be in the center of the page.

    I tried changing the left to something like 550px, but then when I zoom in or out in Firefox, the layout is way off. I need to make it uniform for all resolutions.

    Any ideas?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you know the width then yes you can center the AP element. Assuming the width is 800px
    Code:
    #elementHere
    {
      position:absolute;
      width:800px;
      left:50&#37;;
      margin-left:-400px;/*half the width*/
      top:0;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are awesome. I finally got it to work and definitely understand quite a bit more about CSS after working with the solutions on this page.

    Thank you everyone!

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I also changed the position to absolute but now I have a new issue. Instead of the content sitting in the center of the page, it's completely to the left. I'm pretty sure that's because of the left:0 but I need to have it be in the center of the page.
    I would not set my main wrapping div as position:absolute; because it could slide behind the viewport at narrowed widths. That will cause it's content that goes under the viewport to be un-accessible via scrollbar.

    I would leave it as a static block and center it with auto margins that way it can be accessed with a scrollbar at reduced viewport widths. All you have to do is set position:relative on the main wrapper to stack it above the AP'd background anchor. My code above does that.


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
  •