(DJ) Harvitronix

How-To: Make a clickable background takeover

With advertisers slowly getting over the banner ad thing, background takeovers (clickable background images) are becoming more popular. Although they’re a pain in the ass (I accidentally click on them all the time), they’re quite valuable to advertisers, and thus a good revenue stream.

Making them work, however, can be a total bitch. Here’s how I do it. It’s definitely not a science, and I’m not winning any CSS awards, but it works.

There are three steps.

Step 1: Create Background Image

Your background image should be the width of your content area, plus however wide the graphics on the side are. So if your content area is 800px wide, and the creative on the sides is 200px wide each, your image is 1200px wide, by whatever you want high. It’s good practice to ensure that the background takeover creative fades out to a solid color. Then, you set the background color of your body background to that color, so the creative fades into the rest of the site nicely.

Step 2: The CSS

Part 1: Link class (#skin)
Part 2: Background image class (#background)

Here’s the code:

<style type="text/css">
#skin {
	position: absolute;
	width: 100%;
	height: 800px;
	margin-left: auto;
	margin-right: auto;
	top: 0px;
	left: 0px;
	z-index: 1;
}

#background
{
	background: url(background_takeover.png) no-repeat 50% 0;
	background-color: #ffffff;
	height: 800px;
	position: absolute;
	width: 100%;
	top:220px;
	z-index: 1;
}
</style>

Step 3: Add to your layout

Add this to your site’s page template:

<div id=”background”><a href=”http://yourlinkgoeshere.com” id=”skin”></a></div>

Then, just make sure your content div wrapper has a z-index greater than 1, and you’ve got a clickable background and are making billions of dollars.

Bonus Step:

Crank some tunes!

October Fire (with @FreyDrew) by harvitronix