Background de site cliquable en css

/ Par / Trucs et astuces
Cet article est assez ancien, malgré toute l'attention que j' apporte à mes contenus il est possible que celui-ci ne soit plus d'actualité.
N'hésitez pas à me le signaler si nécessaire via le formulaire de contact.

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.

Articles Relatif à Background de site cliquable en css


1 réflexion sur “Background de site cliquable en css”

  1. Patrick Vollar

    Bravo, la méthode fonctionne parfaitement.
    Mais un petit symbole de lien cassé apparaît en haut à gauche du navigateur et je ne parviens pas à le faire disparaître.
    Merci de votre aide.

    (J’ai indiqué l’adresse du site en construction. Je suis photographe et l’adresse de mon ancien site est http://www.vollat.fr)

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *