Image de fond en CSS

Mettre une image de fond dans une page HTML est un exercice très répandu. Avec tout éditeur HTML, l'option classique est de générer un code du type : <body background="images/image_de_fond.png">, auquel on peut même ajouter bgproperties="fixed" qui rend l'image de fond fixe ; mais cet attribut ne fonctionne qu'avec MSIE.
Avec les feuilles de style on peut obtenir beaucoup plus !

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

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

I. Image de fond en CSS

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

Petits avertissements préliminaires :

  • L'image de fond d'une page HTML doit être légère. Comprenez par là qu'une image de 20 ko c'est déjà beaucoup : cela peut être long à charger et provoquer des problèmes d'affichage ;
  • Attention aux difficultés de lecture qu'une image de fond trop contrastée peut provoquer ;
  • Attention aussi à prendre une couleur de fond différente de celle de la police de caractère, car en attendant que l'image de fond se charge, on n'y verra que pouic.

Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 330 ko ; la couleur utilisée, pour la police de caractère et le fond, est blanche.

I-A. Code CSS de base

L'image de fond se déclare en général pour la balise body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), une citation (<blockquote></blockquote>), etc.

Pour le corps de page, la syntaxe CSS de base sera celle-ci :

 
Sélectionnez

body {
  color:black;
  background-color:white;
  background-image:url(images/image_de_fond.png);
}
                
  • color renseigne la couleur de la police de caractère ;
  • background-color est de la couleur de fond de page ;
  • background-image:url() est bien sûr l'adresse de l'image choisie pour le fond de page.

Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.

Comme d'habitude, cette syntaxe CSS est à mettre dans l'en-tête de la page (entre les balises <head></head>) ou dans une feuille de style externe (voir ici pour ceux qui auraient loupé l'explication).

Visionner l'exemple

I-B. Fond de page fixe

Pour que le fond de page devienne fixe, on rajoutera dans le code :

 
Sélectionnez

background-attachment:fixed;
                

Visionner l'exemple

I-C. Positionner une image de fond

I-C-1. Positionnement par défaut

On peut aussi empêcher la mosaïque grâce à l'attribut background-repeat et positionner l'image dans une partie très précise de l'écran.
Par défaut, l'image se positionne en haut à gauche de l'écran :

 
Sélectionnez

body {
  color:black;
  background-color:white;
  background-image:url(images/image_de_fond.png);
  background-repeat:no-repeat;
}
                    

Visionner l'exemple

I-C-2. Positionnement en haut à droite

Si l'on veut qu'elle se place en haut à droite, on rajoutera le code :

 
Sélectionnez

background-position:right top;
                    

ou :

 
Sélectionnez

background-position:100% 0%;
                    

Visionner l'exemple

I-C-3. Positionnement au centre

Pour une position au centre de la page, cela donnera :

 
Sélectionnez

background-position:center center;
                    

ou :

 
Sélectionnez

background-position:50% 50%;
                    

Visionner l'exemple

I-C-4. Positionnement en bas à droite

Pour une position en bas à droite :

 
Sélectionnez

background-position:right bottom;
                    

ou :

 
Sélectionnez

background-position:100% 100%;
                    

Visionner l'exemple

I-D. Remarques

  • background-repeat accepte 4 attributs : no-repeat, repeat-x pour une répétition de l'image uniquement horizontale, repeat-y pour une répétition uniquement verticale et repeat pour la mosaïque complète ;
  • Vous aurez noté, bien sûr, que les pourcentages dans le background-position offrent plus de latitude que les attributs [right|center|left] [top|center|bottom].

Astuce : On peut aussi cumuler ces différentes informations dans un unique background.

Exemple :
Sélectionnez

body {
  background: white url(image_de_fond.png) no-repeat right bottom;
}
                
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 © 07/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.