Plusieurs images de fond grâce aux CSS

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 on ne peut qu'en mettre une seule...

Pour pouvoir mettre plusieurs images de fond, il faut définir des cadres (des div) auxquels on attribuera une image chacun.

N'hésitez pas à nous faire part de votre avis sur cet article : 16 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

I. Compatibilité

Fonctionne avec :
  • Tous les navigateurs graphiques.
Attributs utilisés:
  • background-position ; background-repeat ; background-image ;
  • margin ;
  • text-align.

II. L'astuce

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
Sélectionnez

#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
Sélectionnez

<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 -->          
            

Voir le résultat !

Attention tout de même à ne pas trop abuser de la méthode, trop de cadres tuent les cadres...

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 22/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.