J’ai récemment recherché comment rendre le background d’un site cliquable de manière simple, après pas mal de recherche je n’ai rien trouvé qui correspondait exactement à ce que je voulais.
Mon objectif étant d’avoir un habillage cliquable un peu comme sur le site du figaro ou de la redoute.

Voici une structure de base de background cliquable en css

Voici le code html de la page, très simple.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example habillage de site web</title>
<link href="habillage.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="habillage_site">
<a href="#"><img src="images/img-trans.png" /></a>
</div>
<div>
<div>
<p>Menu de gauche</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3     </li>
</ul>
</div>
<div>
<h2>Contenu du block principal </h2>
<p>Contenu page </p>
</div>
<div>
&copy; H-hennes 2013
</div>
</div>
</body>
</html>

On rajouter le bloc dans lequel on veut mettre l’image de fond cliquable juste en dessous de la balise <body>
A l’intérieur de ce bloc on va mettre une image transparente, sur laquelle on va appliquer le lien souhaité.

Voici à présent le code css de la page

1
2
3
4
5
6
7
8
9
10
/* Structure basique */
body {background-color:#CCC;color:#000;}
.col-left{float:left;width:200px;background-color:#EEE;}
.content {float:left;width:780px;background-color:#777;}
.footer {clear:both;width:980px;background-color:#AAA;margin-top:15px;}
 
/*Css spécifique pour background cliquable */
#habillage_site {position:fixed;width:100%;height:100%;top:0;left:0;background-position:top center;background-repeat:no-repeat;background-image:url('images/background.jpg');}
#habillage_site img {width:100%;height:100%;}
.container {width:980px;margin:auto;border:1px solid #000;position:relative;}

Dans le css on mets un place une image de fond sur notre div #habillage_site, et on adapte la taille de l’image contenue dans la div à la taille de l’écran.
Pour finir il est important de mettre l’attribut position: relative pour la div container pour qu’elle reste bien au-dessus de notre div d’habillage.