Vous êtes ici > CSS Débutant | Tutoriels CSS | Plusieurs images de fond
Grâce à la propriété background-image, il est très facile de mettre une image de fond dans le corps (body) d'une page web. Mais, sans le support des CSS3 par le navigateur utilisé, on ne peut en mettre qu'une seule...
Pour pouvoir mettre plusieurs images de fond visibles avec des navigateurs anciens ou peu performant, il faut définir des cadres (des div) auxquels on attribuera une image chacun.
Plusieurs images de fond grâce aux CSS
Fonctionne avec :
- Tous les navigateurs graphiques
Attributs utilisés :
- background-position ; background-repeat ; background-image
- margin
- text-align
Prenons l'exemple d'une image (houx2.gif) placée aux quatre coins de la page. On va définir quatre cadres imbriqués (hg, hd, bg, bd), puis leur attribuer un background-position adéquat pour que les images se placent aux quatre coins.
Les marges définies dans le cadre contenu sont précisées en fonction de la taille de l'image pour ne pas que le texte empiète dessus.
Code CSS
#hg, #hd, #bg, #bd {
background-repeat:no-repeat;
background-image:url(houx2.gif);
}
#hg {
background-position:top left;
}
#hd {
background-position:top right;
}
#bg {
background-position:bottom left;
}
#bd {
background-position:bottom right;
}
#contenu {
margin-left:100px;
margin-right:100px;
}
#contenu p {
text-align:justify;
}
Code (x)html
<div id="hg">
<div id="hd">
<div id="bg">
<div id="bd">
<div id="contenu">
<h1>Les quatre coins</h1>
<p> [bla bla]</p>
</div> <!-- /contenu -->
</div> <!-- /bd -->
</div> <!-- /bg -->
</div> <!-- /hd -->
</div> <!-- /hg -->
Attention tout de même à ne pas trop abuser de la méthode, car trop de cadres tuent les cadres....
Avec les CSS3, il est à présent possible d'avoir le même résultat sans déclarer plusieurs div : consultez le tutoriel.
Contact : pascale at mammouthland.net
En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/plusieurs-background-image-div-css.php
