CSS Arrière-plans Multiples
CSS Arrière-plans Multiples
CSS vous permet d'ajouter plusieurs images d'arrière-plan à un élément, grâce à la propriété background-image .
Les différentes images d'arrière-plan sont séparées par des virgules et s'empilent les unes sur les autres, la première image étant la plus proche du spectateur.
L'exemple suivant présente deux images d'arrière-plan : la première est une fleur (alignée en bas à droite) et la seconde est un fond ressemblant à du papier (aligné dans le coin supérieur gauche) :
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Exemple
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Plusieurs images d'arrière-plan peuvent être spécifiées en utilisant soit les propriétés d'arrière-plan individuelles (comme ci-dessus), soit avec la propriété abrégée background .
L'exemple suivant utilise la propriété abrégée background (avec le même résultat que l'exemple précédent) :
Exemple
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
} Propriétés Avancées d'Arrière-plan CSS
| Propriété | Description |
|---|---|
| background | Une propriété abrégée pour définir toutes les propriétés d'arrière-plan en une seule déclaration |
| background-clip | Spécifie la zone de peinture de l'arrière-plan |
| background-image | Spécifie une ou plusieurs images d'arrière-plan pour un élément |
| background-origin | Spécifie où l'image d'arrière-plan est/les images d'arrière-plan sont positionnées |
| background-size | Spécifie la taille de l'image d'arrière-plan |