IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

CSS débutants


précédentsommairesuivant

XIV. Plusieurs images de fond grâce aux CSS

Fonctionne avec :

  • Firefox
  • IE 6 et +
  • NS 6/7
  • Mozilla 1.x ; SeaMonkey
  • Opéra
  • Safari

Attributs utilisés:

  • background-position ; background-repeat ; background-image
  • margin
  • text-align

Oui, on peut mettre plusieurs images de fond dans la même page. Cela dit, il faudra adapter à chaque besoin, même si le principe de base reste le même : il faut faire plusieurs cadres avec, pour chacun, une image.

Prenons l'exemple d'une image (houx2.gif) placée aux quatre coins de la page. On va définir quatre cadres (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>
   </div>
  </div>
 </div>
</div>

Voir le résultat

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


précédentsommairesuivant

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 © 2005 - 2008 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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.