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.

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.

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.

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:


<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:


#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:


#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?

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.

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.

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:

<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.

#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.

That’s because the text-indent :slight_smile:

ALso, position:static is default, and z-index doesn’t work with position:static anyway :slight_smile:

Hi bgodfrey, Welcome to SitePoint! :slight_smile:

This should get you pointed in the right direction.

<!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&#37;;
    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>

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?

If you know the width then yes you can center the AP element. Assuming the width is 800px


#elementHere
{
  position:absolute;
  width:800px;
  left:50&#37;;
  margin-left:-400px;/*half the width*/
  top:0;
}

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!

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.