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;
}

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.

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.

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