En complément de propriété css background color, il est possible d'utiliser la propriété background-image. Une autre méthode consiste à utiliser directement la propriété css background.
Image de fond
Pour définir l'image de fond d'un élément html on utilise cette fois la propriété background-image
<p style="background-image:url('/image-de-fond.png');">
Ce paragraphe a pour image de fond le fichier nommé "/image-de-fond.png" disponible à la racine du site internet.
</p>
Les valeurs possibles pour cette propriété sont :
- url('URL') : Url pointant vers l'image
- none : C'est la valeur par défaut. Elle indique qu’aucune image de fond est affichée
- inherit : L'image de fond doit être la même que celle de l'élément parent.
L'url peut être relative au fichier css ou à la page html "./image-de-fond.png", relative à la racine du site internet "./image-de-fond.png" ou encore absolue "http://example.com/image-de-fond.png".
Image transparente et couleur de fond
La relation entre la couleur de fond et l'image doit être vu comme les calques transparents que l'on peut utiliser dans les logiciels de retouche d'image (photoshop, gimp ...). Pour utiliser cette spécificité il faut bien entendu que le format de l'image supporte la transparence.
Les images png supportent la transparence "partielle", il est possible de mélanger la couleur de fond de l’élément html et la couleur de l'image.
Les images gif supportent la transparence en mode on/off, il n'est pas possible de faire un fondu entre l'image et la couleur de fond mais il est possible d'afficher totalement la couleur de fond.
A ma connaissance, les fichiers jpeg ne supportent pas la transparence.
Positionner une image de fond
Avec la propriété background-position il est possible de modifier la position de l'image de fond dans l'élément html. Voici un exemple qui vous montre les 3 possibilités pour positionner votre image :
<p style="background-image:url('/image-de-fond.png');background-position:right bottom">
L'image de fond "/image-de-fond.png" est positionnée en bas à droite de ce paragraphe.
</p>
<p style="background-image:url('/image-de-fond.png');background-position:50% 25%">
L'image de fond "/image-de-fond.png" est positionnée horizontalement à partir de la moitié du paragraphe et à 25% du haut du paragraphe verticalement.
</p>
<p style="background-image:url('/image-de-fond.png');background-position:10px 5px">
L'image de fond "/image-de-fond.png" est positionnée horizontalement à 10 pixels du bord gauche et à 5 pixels du haut de ce paragraphe.
</p>
Pour chacune de ces méthodes la première valeur indique le positionnement horizontal de l'image alors que la seconde correspond au positionnement vertical.
Les valeurs pour le positionnement horizontal sont :
- left : pour placer l'image à gauche
- center : pour center horizontalement l'image de fond
- right : pour placer l'image à droite
Les valeurs pour le positionnement vertical sont :
- top : pour placer l'image en haut
- center : pour center verticalement l'image de fond
- bottom : pour placer l'image de fond en bas
Pour les positionnements avec des valeurs numériques en pourcentage et en pixel, le coin en haut à gauche de l’élément html est le départ du repère. Ainsi la valeur "0% 0%" correspond au coin haut gauche et "100% 100%" au coin bas droite de l'élément.
Répéter l'image de fond
Par défaut l'image de fond est répétée verticalement et horizontalement. Pour changer la répétition de l'image de fond il faut utiliser la propriété css background-repeat.
<p style="background-image:url('/image-de-fond.png');">
L'image de fond est répétée verticalement et horizontalement pour remplir le fond de cet élément.
</p>
<p style="background-image:url('/image-de-fond.png');background-repeat:repeat-x;">
L'image est répétée horizontalement pour remplir le fond.</p>
<p style="background-image:url('/image-de-fond.png');background-repeat:repeat-y;">
L'image est répétée verticalement pour remplir le fond de cet élément.</p>
</p>
<p style="background-image:url('/image-de-fond.png');background-repeat:no-repeat;">
L'image est n'est pas répétée.</p>
</p>
Les valeurs possibles pour background-repeat sont :
- repeat-x : pour répéter horizontalement l'image de fond
- repeat-y : pour répéter verticalement l'image de fond
- no-repeat : pour ne pas répéter l'image
Scroll ou fixe
La propriété background-attachment permet de définir si l'image doit être impactée ou pas par le scroll de l'élément.
Les valeurs possibles pour background-attachment sont :
- scroll : l'image de fond scroll en accord avec l'élément
- fixed : l'image de fond est fixe, elle n'est pas impactée par le scroll de l'élément
Image : Time to try
