Tutorial 1 - CSS Background Image Map

This is a neat little trick that will allow you to create multiple clickable areas over any background image using CSS. This is easier, to me, than making image maps in HTML used to be.

First add a background image to an element on your page in CSS like this:

The background of this box is an image.

Here's the CSS for this box. Make sure you give the box postion: relative or the link will not work properly.

		.box1 { 
		position: relative; 
		margin: 20px 0 20px 40px; 
		padding: 5px 0; width: 300px; 
		height: 100px; 
		background-image: url(images/background.jpg); 
		background-repeat: no-repeat; 
		}
		

Then create a transparent box, absolutely positioned, that fits right over the top of the section of background image you want to make clickable. It's easier to give this box a border so you can actually see it while you’re getting it into position. It should look like this:

The background of this box is an image.

Here's the CSS for this transparent box. Manipulate the top, left, width and height pixels until you get it positioned where you want it (don't forget to remove the border if you don't want users to see it):

		#box-link { 
		position: absolute; 
		top: 8px; 
		left: 20px; 
		width: 83px; 
		height: 83px; 
		background-color: transparent; 
		border: 1px solid yellow; }	
		

Here's the HTML for this final version of the box with its link:

		<div class="box1">
		<a id="box-link" href="#"></a>
		<p>The background of this box is an image.</p>
		</div>

I hope this helps! You can make any number of clickable areas on any background image with this technique.

--
Debbie Campbell
www.position-relative.com