Les propriétés CSS d'arrière-plan

Dans ce chapitre nous allons parler de plusieurs propriétés qui servent à personnaliser le fond d'une page web. Ces propriétés fonctionnent avec tous les balises de type bloc (div, p, h1..h6, blockquote, address, pre, ul, ol, li, table, td, tr, th, form, fieldset etc.), et tous les éléments XHTML de type inline (span, a, img pour les images transparentes, em, strong, sub, sup, q, acronym, input, textearea, select etc.).

• background-color (couleur de fond)

• background-image (image d'arrière-plan)

• background-repeat (répétition du fond)

• background-attachment (stabilité-fluidité du fond)

• background-position (Position d'arrière-plan)

• La propriété générique background

background-color (couleur de fond)

Sachez tout d'abord que la valeur par défaut de la propriété CSS background-color est "transparent", car chaque élément laisse apparaître dans son espace blanc la couleur de l'élément parent qui se trouve immédiatement en haut de la hiérarchie. Est-ce que c'est noté ? Good !

Pour modifier cette conduite vous devez utiliser la propriété CSS background-color qui permet de personnaliser la couleur d'arrière-plan des éléments. Vous avez l'entière liberté de choisir l'une des trois méthodes de définition des couleurs (nom de la couleur en anglais, code RGB, code hexadécimal). Si vous appliquez cette propriété à la balise body, alors tout le fond du document changera de couleur. Exemple :

body { /* page avec fond bleu */
background-color: blue;
}
h1 { /* en-têtes avec fond vert */
background-color: green;
}

vous avez aussi la possibilité d'utiliser la propriété CSS background-color avec les éléments en-ligne tel qu'un span. Exemple :

<p><span style="background-color: orange;">La propriété CSS background-color</span>
permet de spécifier la couleur de fond de n'importe quel élément XHTML.</p>

La propriété CSS background-color permet de spécifier la couleur de fond de n'importe quel élément XHTML.

background-image (image d'arrière-plan)

L'image qui va servir d'arrière-plan doit faire partie des formats supportés par le web (JPEG, GIF, PNG-8, PNG-24). Si vous avez utilisé cette propriété avec la balise body. Votre document aura une image pour arrière-plan. Si l'image est trop petite par rapport aux dimensions de votre document, l'image sera répétée autant de fois horizontalement et verticalement qu'il est nécessaire pour couvrir la totalité de l'écran  :

Dans le cas contraire, si l'image a des proportions plus grandes que celles du fond, une partie de l'image ne sera pas affichée, c'est-à-dire la portion qui excède les dimensions du document. Voici la syntaxe :

body, h1 {
background-image: url("rap.jpg"); /* le document et les titres N° 1
auront une image pour arrière-plan. N'oubliez pas d'encadrer
l'URL par les doubles guillemets, et remarquez qu'il n'y a pas
d'espace entre le mot "url" et les parenthèses */
} 

Faites très attention concernant l'url (l'adresse de l'image). Si vous utilisez une feuille de style externe, l'URL doit être spécifiée par rapport à cette feuille et non pas par rapport à votre fichier XHTML. Mais si vous avez déclaré votre code CSS dans l'en-tête de votre document ou directement dans les balises avec l'attribut style dans ce cas-là, l'URL doit être indiquée par rapport au fichier XHTML. La syntaxe de l'URL suit les mêmes règles d'adressage que liens.

Méfiez-vous des images de grande taille qui risquent d'alourdir considérablement le temps de téléchargement, ce qui est de nature à décourager les gens à venir explorer votre site

Notez qu'il ne faut jamais mettre une image qui a une importance consistante quant au contenu de la page en arrière-plan. Car ceci va la faire échapper du corps structurel du document XHTML, en plus vous n'aurez pas la possibilité de mentionner un texte alternatif pour l'image (images accessibles). Donc cette propriété ne doit concerner que les images purement décoratives (l'accessibilité selon les types d'images).

background-repeat (répétition du fond)

Par défaut une image d'arrière-plan est répétée de façon à couvrir la totalité du document (body) ou d'un élément (h1, p, div etc.). Pour déroger à cette règle parfois agaçante, on a inventé la propriété CSS background-repeat qui accepte les quatre valeurs suivantes :

• repeat : répéter (comportement par défaut). Une image dont la résolution est inférieure à celle du canevas, sera répétée horizontalement et verticalement autant de fois qu'il est nécessaire pour couvrir toute la surface du canevas ;
• repeat-x : répéter l'image sur la première ligne horizontalement, pour former une bande horizontale d'images. La lettre x désigne l'axe horizontal ;
• repeat-y : répéter l'image sur la première colonne verticalement, pour former une bande verticale d'images. La lettre y désigne l'axe vertical ;
• no-repeat : ne pas répéter l'image de fond.

Voici des aperçus de toutes les constantes, avec une petite image pour les appréhender davantage :

reapeat (bandes horizontales et verticales d’images)

repeat-x (bande horizontale d'images)

repeat-y (bande verticale d’images)

no-repeat

background-attachment (stabilité-fluidité du fond)

Par défaut une image d'arrière-plan bouge avec le texte quand on le fait défiler. Pour que l'image reste fixe vous n'avez qu'à vous servir de la propriété CSS background-attachment, les valeurs possibles sont :

• scroll : correspond au réglage par défaut. Le fond bouge lorsqu'on se sert des barres de défilement ;
• fixed : l'image de fond reste fixe même si on défile la page avec les barres de défilement horizontale et verticale. Lorsque l’image d’arrière-plan est figée le texte défilera sur elle à l'instar du générique d’un film.

background-position (Position d'arrière-plan)

Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'écran (ou celui de n'importe quel bloc tel qu'un div). Grâce à la propriété CSS background-position, vous aurez la possibilité de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe où dans l'écran. Mais cette propriété n'est pertinente que si vous avez utilisé la propriété CSS background-repeat avec une valeur autre que repeat, c'est-à-dire repeat-x, repeat-y ou no-repeat. Les mentions possibles sont :

• Coordonnées exprimées en valeurs absolues (par rapport au coin supérieur gauche du document ou d'un bloc). Dans ce coin supérieur gauche les coordonnées équivalent à (0,0). Exemples :

  body {
  background-position: 1.5cm 2cm; /* le coin supérieur gauche de l'image sera éloigné
  du coin supérieur gauche de la page par 1.5 cm de gauche et 2 cm du haut */
  }
  .fond {
  background-position: 6px 10px; /* l'image sera positionnée à 6px depuis le bord
  gauche et à 10px depuis le bord supérieur du bloc qui a reçu la classe ".fond" */
  }
  

• Les coordonnées exprimées en pourcentages, sont calculés par rapport à l'élément recevant la propriété CSS background-color :

  body {
  background-position: 25% 50%; /* image centrée verticalement
  et placée à un quart de la page vers la gauche */
  }

  Avec la paire de valeur '0% 0%', le coin en haut à gauche de l'image est aligné sur celui de la boîte qui a reçu la propriété CSS background-imag. Je parle pas de la boîte qui englobe l'espacement (padding), la bordure (border) et la marge (margin). Voir chapitre : modèle de boîte - box model).

  La paire de valeur '100% 100%' positionne le coin en bas à droite de l'image sur celui de l'élément. Avec la paire de valeur '20% 70%', le point situé 20% vers la droite et 70% vers le bas dans l'image est placé sur le point situé 20% vers la droite et 70% vers le bas dans l'élément.

• Position exprimée en mots-clés : "top : en haut", "bottom : en bas", "center : au centre", "left : à gauche " ou "right : à droite ".

  body {
  background-position: center; /* image centrée verticalement et horizontalement */
  }

  Vous pouvez combiner ces mentions pour signaler des positions plus précises :

  -'top right' et 'right top' /* image en haut à droite ('100% 0%' de la page ou du bloc) */
  -'top left' et 'left top' /* image en haut à gauche ('0% 0%' de la page ou du bloc) */
  -'top', 'top center' et 'center top' /* image centrée en haut ('50% 0%' de la page ou du bloc) */
  -'bottom right' et 'right bottom' /* image en bas à droite ('100% 100%' de la page ou du bloc) */
  -'bottom left' et 'left bottom' /* image en bas à gauche ('0% 100%' de la page ou du bloc) */
  -'bottom', 'bottom center' et 'center bottom' /* image centrée en bas ('50% 100%' de la page ou du bloc) */
  -'left', 'left center' et 'center left' /* image centrée verticalement et placée à gauche ('0% 50%' de la page ou du bloc) */
  -'center' et 'center center' /* image centrée horizontalement et verticalement ('50% 50%' de la page ou du bloc) */
  -'right', 'right center' et 'center right' /* image centrée verticalement et placée à droite ('100% 50%' de la page ou du bloc) */

  Je vous conseille de ne pas s'attacher beaucoup aux mentions alphabétiques. Car elles ne sont pas forcément interprétées de la même manière dans tous les navigateurs, et n'oubliez surtout pas que les mentions absolues ou relatives sont calculées par rapport au coin supérieur gauche de l'élément de base (qui sert de référence), dans ce point là les coordonnées sont : '0px 0px' en absolu et '0% 0%' en terme relatif.

Astuces :

Vous pouvez mélanger les valeurs relatives et absolues (mais les notations alphabétiques s'utilisent en solo). Exemple :

body {
background-position: 50% 300px; /* image de fond centrée horizontalement
et placée à 300px en-dessous du bord supérieur du document */
}

Pensez à utiliser toujours en plus de l'image de fond une couleur de fond pour des mesures de précaution. Ainsi si le navigateur n'a pas pu télécharger l'image d'arrière-plan (connexion lente, image supprimée, renommée ou déplacée etc.), la couleur de fond va substituer à l'image. D'autre part si l'image ne couvre pas l'entièreté du fond, la couleur d'arrière-plan va combler le reste du fond. Si vous n'avez pas signalé la propriété background-color. Les parties non couvertes par le fond (si background-repeat # repeat) apparaîtront en blanc.

La propriété générique background

La méga-propriété background peut être assimilée à un raccourci, du fait qu'elle permet d'envelopper toutes les propriétés CSS : background-color, background-image, background-repeat, background-attachment et background-position. Exemple :

body {
background-color: #ffffaa;
background-image: url("texture.gif");
background-repeat: no-repeat;
background-attachment: fixed; 
background-position: center;
}
équivaut à :
body {
background: #ffffaa url("texture.gif") no-repeat fixed center;
}

Commentaires

• pour toutes les propriétés génériques. Les valeurs passées sont séparées par des espaces. En plus l'ordre n'a pas d'importance. En fait le navigateur peut identifier facilement les propriétés CSS rien qu'avec les valeurs passées ;
• vous n'êtes pas obligé de mentionner toutes les valeurs. En fait les propriétés CSS dont aucune valeur n'apparaît, prennent leurs valeurs initiales (valeur par défaut). A titre d'exemple si vous omettez les propriétés CSS background-repeat, background-attachment et background-position. Les valeurs "repeat", "scroll" et "0% 0%" seront automatiquement reprises par le navigateur.

Je parie que les propriétés CSS d'arrière-plan vous donnent beaucoup d'idées. Mais n'oubliez jamais que la simplicité prime toujours, et qu'un fond blanc suffit dans la plupart des cas

Dans les prochains tuto, on va décortiquer un sujet très intéressant en CSS : le modèle des boîtes (box model) en CSS.