Vous êtes ici > CSS Débutant | Premiers pas en CSS | Image de fond

Mettre une image de fond dans une page web est un exercice très répandu. Avec tout éditeur de page 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 fixe l'image de fond ; mais cet attribut ne fonctionne qu'avec MSIE.

Avec les feuilles de style on peut obtenir beaucoup plus !

Image de fond en CSS

Fonctionne avec :

  • Tous les navigateurs graphiques

Attributs utilisés :

  • background-image
  • background-repeat
  • background-position

Petits avertissements préliminaires :

  • Une image de fond 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.

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 : 

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

Fond de page fixe

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

background-attachment:fixed;

Visionner l'exemple

Positionner une image de fond

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 :

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

Visionner l'exemple

Positionnement en haut à droite

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

background-position:right top;

ou :

background-position:100% 0%;

Visionner l'exemple

Positionnement au centre

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

background-position:center center;

ou :

background-position:50% 50%;

Visionner l'exemple

Positionnement en bas à droite

Pour une position en bas à droite :

background-position:right bottom;

ou :

background-position:100% 100%;

Visionner l'exemple

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 :

body {
background: white url(image_de_fond.png) no-repeat right bottom;
}

Lecture complémentaire

précédent suivant

Haut

Contact : pascale at mammouthland.net

Creative Commons License

En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/image_de_fond.php