Il est possible d'affecter plusieurs images de fond pour un même élément.

### Plusieurs image de fond avec background

Pour définir plusieurs images de fond pour un élément, le plus simple est d'utiliser la propriété-raccourci background.

On définira autant de raccourcis qu'il y a de fond, en les séparant par une virgule (`,`).

    body {
    	background: url(devant.png) 10px 10px no-repeat,
    				url(entre.jpg) bottom center no-repeat,
    				url(derriere.gif) #56AD4F;
    }

Exemple : plusieurs images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
html { height: 100%;} /* force la hauteur de page pour que la deuxième image de fond soit bien en bas de la page */ body { background: url(../exemples/img/etoiles.jpg) repeat-x, url(../exemples/img/planete.jpg) bottom center / 100% 20% no-repeat #000000; } section { width: 400px; margin: 1em auto; } h2 { background: url(../exemples/img/force.gif) no-repeat; padding: 0.4em 0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; color: white; } p { background-color: rgba(195, 240, 246, 0.50); margin: 1em 0; padding: 1em; border-radius: 1em; }

C'est l'ordre de déclaration des fonds qui définit leur ordre de superposition : le premier déclaré est à l'avant-plan, le deuxième derrière le premier, le troisième derrière le deuxième, etc.

Exemple : plusieurs images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> </body> </html>
Fichier CSS : styles.css
html {height: 100%} body { background: url(../exemples/img/anakin_vieux.png) 56% 56% no-repeat, url(../exemples/img/anakin_adulte.png) 42% 42% no-repeat, url(../exemples/img/anakin_ado.png) 30% 30% no-repeat, url(../exemples/img/anakin_enfant.png) 20% 20% no-repeat, url(../exemples/img/etoiles.jpg); }

Une autre façon de déclarer des images de fonds multiples peut se faire sans la propriété-raccourci background, en définissant les propriétés individuellement par une liste représentant chacune des images de fond.

L'exemple précédent pourrait être ainsi réécrit de cette façon.

Exemple : plusieurs images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> </body> </html>
Fichier CSS : styles.css
html {height: 100%} body { background-image: url(../exemples/img/anakin_vieux.png), url(../exemples/img/anakin_adulte.png), url(../exemples/img/anakin_ado.png), url(../exemples/img/anakin_enfant.png), url(../exemples/img/etoiles.jpg); background-position: 56% 56%, 42% 42%, 30% 30%, 20% 20%, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; }

### Plusieurs image de fond avec :before et :after

Une autre technique pour avoir plusieurs images de fond pour un élément est d'utiliser les pseudo-éléments ::before et ::after

Exemple : plusieurs images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Véhicules à louer</h3> <figure> <img src="../exemples/img/vulture_droid.png"> <figcaption>1 - Vulture Droid</figcaption> </figure> <figure class="scotch"> <img src="../exemples/img/naboo_starfighter.png"> <figcaption>2 - Naboo Starfighter</figcaption> </figure> <figure> <img src="../exemples/img/v_wing.png"> <figcaption>3 - V-wing</figcaption> </figure> <figure class="scotch"> <img src="../exemples/img/mandalorian_fighter.png"> <figcaption>4 - Mandalorian Fighter</figcaption> </figure> <figure> <img src="../exemples/img/x_wing.png"> <figcaption>5 - X-wing</figcaption> </figure> </body> </html>
Fichier CSS : styles.css
body { background: url(../exemples/img/bois.jpg); } figure { float: left; /* met les figures côte à côte */ border: 10px solid #fff; /* bord blanc de 10 pixels */ position: relative; /* pour pouvoir positionner en absolu les before et after */ margin: 20px 5px; background-color: white; } img { background: #000; padding: 5px; } figure::before { background: url(../exemples/img/punaise32.png) no-repeat; content: " "; height: 32px; left: -12px; position: absolute; top: -32px; width: 32px; } figure::after { background: url(../exemples/img/punaise_d_32.png) no-repeat; content: " "; height: 32px; position: absolute; right: -14px; top: -36px; width: 32px; } figure.scotch::before, figure.scotch::after { background: url(../exemples/img/scotch.png) no-repeat; content: " "; height: 32px; left: 15%; position: absolute; width: 115px; } figure.scotch::after { top: 155px; left: 50%; }