Utilisation des fonds en css

La propriété background en css

Dans la fenêtre de définition de règle CSS, la catégorie Arrière-plan concerne la possibilité d'appliquer des fonds aux conteneurs HTML. Le premier conteneur concerné est la page elle-même. Le réglage se fait sur la balise "body".

La première propriété (Background-color) concerne la couleur d'arrière-plan.

Les autres propriétés de la catégorie Arrière-plan concernent l'utilisation d'images en arrière-plan : le chemin de l'image (Background-image), la façon de la répéter (Background-repeat) et son positionnement sur la page (Background-position), notamment quand elle n'est pas répétée.

Les images d'arrière-plan ne peuvent pas être sélectionnées ni copiées. On ne peut pas leur appliquer de lien.

Couleur de fond de la page

Il faut toujours appliquer au moins une couleur de fond à body.

Cliquer sur le carré blanc droite de Background-color (première ligne) et choisir une couleur dans la Palette. Attention la couleur "sans" symbolisée par un carré barré en haut de la Palette est en fait la couleur par défaut appliquée par le navigateur. La choisir correspond à ne pas remplir la case Background-color et donc se soumettre aux aléas des navigateurs.

Image en fond de page

Choisir une image à placer en fond de page. Cliquer sur le bouton Parcourir pour la choisir dans le dossier racine.

Par défaut une image se répète en mosaïque. C'est très moche quand il s'agit de la photo du dernier né de la famille, mais s'il s'agit d'un motif réfléchi cela peut être très intéressant (hachure ou autre). Il faut alors fabriquer une image de base la plus petite possible. Il est recommandé de fabriquer une image (en GIF ou PNG) de dimensions mutiples de 16 pixels.

Exemple de motif en mosaïque. Cliquer sur l'image ci-dessous pour voir l'exemple :

Il est possible de limiter la répétition dans un sens, vertical ou horizontal. C'est intéressant pour un dégradé par exemple.

Exemple de répétition verticale avec un dégradé. La valeur de Background-repeat est réglée sur repeat-y. Cliquer sur l'image ci dessous pour voir l'exemple :

Image unique en fond de page

Pour empêcher la répétition d'une image en arrière-plan, régler la valeur Background-repeat sur no-repeat. C'est utile pour un élément décoratif placé ou une image de fond plein écran. Dans ce dernier cas, pensez à réaliser une image suffisamment grande par rapport aux écrans (mini 1600x1200 pixels).

Exemple d'image non répétée sans positionnement. Cliquer sur l'image ci dessous pour voir l'exemple :

Il faut alors régler également les valeurs de positionnement de cette image (Background-position) en X et en Y par rapport au coin supérieu gauche du conteneur (ici, la page entière).

Les valeurs de positionnement peuvent être exprimées de manière abolue, en pixel le plus souvent, indiquent un emplacement par rapport au coin supérieur gauche du conteneur.

Ces valeurs peuvent être exprimées de manière relative en pourcentage ou en utilisant les valeurs indiquées dans les menus ci-dessus (left, center, right pour position (X) ou top, center, bottom pour position (Y))

0% équivaut à left ou top
50% équivaut à center
100% équivaut à right ou bottom

Exemple d'image unique d'arrière plan positionnée en haut à droite (position X sur 100% ou right, position Y sur 0% ou top). Cliquer sur l'image ci-dessous pour voir l'exemple :

Exemple d'image unique (no-repeat) d'arrière plan positionnée sur la page (position X = 120 px, position Y = 80 px). Cliquer sur l'image ci-dessous pour voir l'exemple :

Voir ci-dessous les valeurs correspondantes pour body :


Déplacement d'une image de fond

Lorsqu'une image est placée en arrière-plan d'une page comportant beaucoup de contenu, de sorte qu'une barre de défilement verticale apparaisse, il est possible de régler comment l'image de fond se comporte lorsque l'on scrolle. C'est le paramètre Background-attachment.

La valeur scroll fait que l'image se déplace en même temps que le contenu de la page.
La valeur fixed fait que l'image reste immobile quand le contenu se déplace.

Exemple d'une image de fond dont la valeur de Background-attachment a été réglée sur fixed. Cliquer sur l'image ci-dessous pour voir l'exemple et déplacez l'ascenseur vertical (le texte défile mais l'image reste fixe) :

Autres conteneurs

Il est possible de placer une couleur ou une image d'arrière-plan sur un titre (h1 par exemple), un paragraphe ou un bloc (balise div, que nous verrons plus tard).

Cette technique est très utilisée pour réaliser des boutons de menus. Voir l'exemple ci-dessous (le texte ne fait partie de l'image, essayez donc de le sélectionner pour vous en convaincre) :

BOUTON