À l'aide du langage CSS on peut très facilement modifier l'image de fond de la page.
Pour cela, on utilise la propriété background-image et sa valeur prend la forme de quelque chose comme ça : "url(monimage.jpg)".
En voici un exemple :
body { background-image: url(mondossier/monimage.png); }
Ce code CSS affichera une image de fond à toute la page web.
Mais il existe de nombreuses autres propriétés qui peuvent influencer ou modifier l'image de fond d'une page, ou de toute autre balise HTML.
La position du fond
Positionner son image de fond avec CSS est très facile, il existe justement pour ça une propriété que l'on peut utiliser qui est background-position.
Cette propriété ne prend pas une mais deux valeurs, séparées par un espace. Il s'agit de la position par rapport au coin haut-gauche de la page, ou de la balise si vous appliquez cette propriété à partir d'une balise.
La première valeur est sa distance par rapport à la gauche, donc vers la droite, et la seconde valeur est sa distance par rapport au haut, donc vers le bas.
Voici un exemple :
body { background-image: url(image.png); background-position: 30px 80px; }
Cette image sera positionnée à 30 pixels de la gauche de la page et à 80 pixels du haut de la page.
La répétition du fond
On peut également faire se répéter le fond. Par exemple si le fond est une petite image qui ne remplit pas tout l'espace, on peut répéter cette image.
Pour cela on utilise la propriété background-repeat.
Celle-ci peut prendre les valeurs suivantes :
no-repeat : le fond ne sera pas répété
repeat-x : le fond sera répété horizontalement (axe des x)
repeat-y : le fond sera répété verticalement (axe des y).
repeat : le fond sera répété en mosaïque (par défaut)
La fixation du fond
On peut également choisir de fixer ou non le fond sur la page. Qu'est-ce que ça veut dire que fixer une image de fond ? Si le fond est fixé, quand vous scrollez (descendez ou montez avec les barres de défilement) dans la page, votre fond vous suit.
Pour fixer un fond on utilise la propriété CSS background-attachment, qui peut prendre l'une ou l'autre de ces deux valeurs :
fixed : l'image de fond est fixée
scroll : l'image de fond n'est pas fixée (par défaut)