Le fond de page
Vous vous demandiez comment insérer un arrière-plan dans une page web grâce au CSS. Dans ce cas vous êtes au bon endroit. L’objectif de ce cours c’est de vous montrer comment choisir une couleur ou une image comme arrière-plan de la page. Nous avons vu qu’en html, pour choisir l’arrière-plan d’une page, il suffit d’utiliser l’attribut bgcolor (quand il s’agit d’une couleur) ou background (quand il s’agit d’une image) dans la balise body. Cette méthode est assez simple et efficace quand il s’agit d’une page web ; mais avec un site web comportant plusieurs pages, cette méthode peut devenir facilement compliquée dans la mesure où il faut la répéter dans toutes les pages du site, ce qui peut causer une perte de temps lors de la mise à jour de l’arrière plan du site, car dans ce cas il faut modifier toutes les pages du site. Avec le CSS, ce problème peut être évité.
1. Choisir la couleur de l’arrière plan
Pour choisir la couleur de l’arrière plan, on utilise background-color.
Syntaxe : background-color : valeur ;
ici valeur peut être soit la couleur à choisir ou transparent.
Exemple :
Page html :
La feuille de style style.css
Bof! Enfin notre page a la couleur bleue comme arrière-plan. 0000FF est le code hexadécimal équivalent à la couleur bleue.
2. Choisir une image comme arrière-plan
Pour choisir une image comme arrière-plan, on utilise background-image.
Syntaxe : background-image : valeur ;
ici valeur peut être soit une url ou transparent.
Exemple :
Dans cet exemple, nous reprenons la même page html que nous avions dès le début.
Voici la feuille de style style.css
Dans notre exemple, l’image choisie comme arrière-plan est fond.png. Il faut penser à mettre la page html, la feuille de style style.css et l’image fond.png dans un même répertoire pour que cela marche.
Quand nous travaillons avec une image comme arrière-plan, d’autres propriétés peuvent s’ajouter :
background-attachment : valeur
Background-attachment sert à définir si l’image d’arrière-plan doit être fixe ou doit suivre le défilement de
la page.
Ici valeur peut être soit fixed (quand l’image doit être fixe) ou soit scroll (si l’image doit suivre le defilement.
background-position : valeurs
background-position spécifie la position initiale de l’image d’arrière-plan de l’élément. Les valeurs vont toujours de paire pour indiquer la position en abscisse (x) et en ordonnée (y). Les valeurs acceptées sont : taille (en px, en pourcentage), top, center, bottom, left, right.
background-repeat: valeur
background-repeat est utilisé pour définir si l’image de l’arrière-plan doit être répétée ou non répétée.
Ici valeur peut être soit repeat (si on veut répéter l’image d’arrière-plan) ou no-repeat si on ne
veut pas répéter l’image d’arrière plan.
Exemple :
avec notre exemple, nous travaillons toujours avec la même page html.
Voici notre feuille de style style.css
NB: Ce que nous avons fait pour le fond de page, peut être fait pour le fond de n’importe quel élément de la page, comme par exemple un paragraphe, une image, un mot…
