Fond en CSS

Gérer le fond (background) en CSS

En CSS, il est possible non seulement de mettre un fond sur une page web mais aussi de mettre des fonds sur une partie de la page (les titres, les paragraphes, etc.) Les propriétés pour les fonds sont généralement précédées du mot background. On peut mettre comme fond une couleur mais aussi une image.

La couleur de fond

La propriété background-color sert à mettre une couleur de fond. Pour mettre un fond vert sur toute la page web par exemple, on utilise des styles dans la balise body.

Code CSS :

body {
background-color: green; /* fond de page en vert
color: black; /* couleur du texte en noir */
}

Si on ne désire mettre du fond que sur une partie, il suffit de créer une classe .fondcouleur par exemple. Et de l'appliquer sur l'élément.

Code CSS :

.fondcouleur
{


background-color: yellow;
color: green ;


}

Code XHTML :

<h1 class="fondcouleur">Titre </h1>

Notre titre en h1 sera surligné en jaune, alors que le texte sera vert.

Les images de fond

La propriété background-image nous permet de placer une image en fond de la page ou en fond de texte d'un ou plusieurs éléments. Il suffit de spécifier une image d'arrière-plan en indiquant son chemin. Pour une image fond.jpg se trouvant dans un répertoire image du site, on aura donc :

Code CSS :

body
{


background-image: url("image/fond.jpg");


}

On donne le chemin de l'image comme valeur de la propriété background-image. Il est nécessaire de bien formater les textes et les données des couleurs pour qu'ils soient compatibles avec l'arrière plan. Sinon ils risquent de ne pas être visibles.

Image de fond : fixe ou pas

Lors du défilement du texte quand on clique sur la barre de défilement, il est possible de rendre l'image de fond immobile. C'est-à-dire que quel que soit le mouvement de la scrollbar, seuls les textes bougent. L'image de fond reste fixe. Le nom de la propriété CSS pour avoir ce fond fixe est background-attachment et il peut prendre 2 valeurs :

• scroll : l'image de fond défile avec le texte (par défaut)
• fixed : l'image de fond reste fixe.

body
{


background-image: url("/images/fond.jpg");
background-attachment: fixed; /* Le fond restera fixe */


}

Mettez des paragraphes très longs dans votre code XHTML pour bien voir le résultat. Essayez de faire défiler les barres de défilement. Vous verrez que le fond ne bouge pas avec le texte.

Répétition de l'image de fond

Parmi les propriétés CSS pour les fonds, il y en a une qui est très particulière parce qu'elle permet de gérer la répétition de l'image de fond. Il s'agit de la propriété background-repeat. Ses valeurs possibles sont les suivantes :

• no-repeat : le fond ne sera pas répété
• repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
• repeat : le fond sera répété, horizontalement et verticalement. (valeur par défaut).

body
{


background-image: ("/images/fond.jpg");
background-repeat: repeat-y;


}

Ce code CSS donnera une page avec un fond répété verticalement.

Positionnement d'une image d'arrière-plan

On peut aussi avoir différentes façons de positionner l'image d'arrière-plan. Ce qui peut s'avérer très intéressant lorsqu'on n'a qu'une image unique sur la page. C'est à dire lorsqu'on a mis un fond qui ne se répète pas "background-repeat: no-repeat;" La propriété background-position est utilisée si on veut indiquer la position du fond par rapport au coin supérieur gauche de l'élément. L'élément correspond à la page si le fond est appliqué sur la balise body. Mais il peut aussi s'agir d'un paragraphe.

Pour mettre un fond placé à 40 pixels de la gauche et 50 pixels du haut, la propriété aura comme valeur : background-position:40px 50px; Il est aussi possible d'indiquer les valeurs à l'aide de mots clés suivants :

• top : en haut
• bottom : en bas
• left : à gauche
• center : centré
• right : à droite

Ensuite, il suffit de combiner les mots comme on veut. Par exemple, background-position: top right ; permet d' aligner une image en haut à droite.

Mettre une image en fond rend la page plus jolie, mais il faut le faire avec modération. En fait, si l'image de fond est très lourde, le temps de chargement de votre page risque d'augmenter. Plus la page met de temps à se charger, plus le visiteur risque de s'en aller avant la fin du chargement.

Notez qu'il y a différentes façons de traiter les images pour qu'elles soient le moins lourdes possible. Enfin, mettez une image qui convienne à la couleur de votre texte, afin que ce dernier reste bien lisible.