Dans les exemples qui suivent, je vais modifier l'image de fond de la page. Cependant, tout comme pour la couleur de fond, n'oubliez pas que l'image de fond ne s'applique pas forcément à la page entière. On peut aussi mettre une image de fond derrière les titres, paragraphes, etc.
Appliquer une image de fond
La propriété permettant d'indiquer une image de fond est
background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par exemple :
1
2
3
4
| body{ background-image: url("neige.png");} |
Ce qui nous donne la figure suivante.
Bien entendu, votre fond n'est pas forcément en PNG, il peut aussi être en JPEG ou en GIF.
L'adresse indiquant où se trouve l'image de fond peut être écrite en absolu (
L'adresse indiquant où se trouve l'image de fond peut être écrite en absolu (
http://…) ou en relatif (fond.png).Options disponibles pour l'image de fond
On peut compléter la propriété
background-image que nous venons de voir par plusieurs autres propriétés qui permettent de changer le comportement de l'image de fond.
background-attachment : fixer le fond
La propriété CSS
background-attachment permet de « fixer » le fond. L'effet obtenu est intéressant car on voit alors le texte « glisser » par-dessus le fond. Deux valeurs sont disponibles :fixed: l'image de fond reste fixe ;scroll: l'image de fond défile avec le texte (par défaut).
1
2
3
4
5
| body{ background-image: url("neige.png"); background-attachment: fixed; /* Le fond restera fixe */} |
background-repeat : répétition du fond
Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriété
background-repeat :no-repeat: le fond ne sera pas répété. L'image sera donc unique sur la page.repeat-x: le fond sera répété uniquement sur la première ligne, horizontalement.repeat-y: le fond sera répété uniquement sur la première colonne, verticalement.repeat: le fond sera répété en mosaïque (par défaut).
Exemple d'utilisation :
1
2
3
4
5
| body{ background-image: url("soleil.png"); background-repeat: no-repeat;} |
background-position : position du fond
On peut indiquer où doit se trouver l'image de fond avec
background-position. Cette propriété n'est intéressante que si elle est combinée avec background-repeat: no-repeat; (un fond qui ne se répète pas).
Vous devez donner à
background-position deux valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
1
| background-position: 30px 50px; |
… votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il est aussi possible d'utiliser ces valeurs en anglais :
top: en haut ;bottom: en bas ;left: à gauche ;center: centré ;right: à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous taperez :
1
| background-position: top right; |
Ainsi, si je veux afficher un soleil en image de fond (figure suivante), en un unique exemplaire (
no-repeat), toujours visible (fixed) et positionné en haut à droite (top right), je vais écrire ceci :
1
2
3
4
5
6
7
| body{ background-image: url("soleil.png"); background-attachment: fixed; /* Le fond restera fixe */ background-repeat: no-repeat; /* Le fond ne sera pas répété */ background-position: top right; /* Le fond sera placé en haut à droite */} |
Combiner les propriétés
Si vous utilisez beaucoup de propriétés en rapport avec le fond (comme c'est le cas sur ce dernier exemple), vous pouvez utiliser une sorte de « super-propriété » appelée
background dont la valeur peut combiner plusieurs des propriétés vues précédemment : background-image, background-repeat,background-attachment et background-position.
On peut donc tout simplement écrire :
1
2
3
4
| body{ background: url("soleil.png") fixed no-repeat top right;} |
C'est la première « super-propriété » que je vous montre, il y en aura d'autres. Il faut savoir que :
- L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre.
- Vous n'êtes pas obligés de mettre toutes les valeurs. Ainsi, si vous ne voulez pas écrire
fixed, vous pouvez l'enlever sans problème.
Plusieurs images de fond
Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci :
1
2
3
4
| body{ background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed;} |
La première image de cette liste sera placée par-dessus les autres (figure suivante). Attention donc, l'ordre de déclaration des images a son importance : si vous inversez le soleil et la neige dans le code CSS précédent, vous ne verrez plus le soleil !
À noter que les images de fond multiples fonctionnent sur tous les navigateurs sauf sur les anciennes versions d'Internet Explorer, qui ne reconnaît cette fonctionnalité qu'à partir de la version 9 (IE9).
0 commentaires:
Enregistrer un commentaire