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…



Une question? Cliquez ici pour la poser.

Retour sur le portail du HTML/CSS