Plusieurs images de fond grâce aux CSS

• Tous les navigateurs graphiques.

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

#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;
}

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