Images d'arrière-plan multiple en CSS3

Compatibilités

Safari 1.3 et + , Chrome 2 et + , FireFox 3.6 et + , Opéra 10.5 et + , Internet Explorer 9 beta et +

arriere-plan-multiple.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<title>Images d&#39;arri&egrave;re-plan multiple en CSS3</title>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
 
 
<!-- Style CSS -->
<link rel='stylesheet' type='text/css' href='arriere-plan-multiple.css' />
 
 
 
</head>
<body>
 
 
<div class="arriere_plan_multiple"></div>
 
 
<!-- Javascript -->
 
</body>
</html>

Télécharger le fichier

arriere-plan-multiple.css

.arriere_plan_multiple{
 float:left;
 margin:0 0 20px 1%;
 width:98%;
 height:300px;
 text-align:center;
 background: url(http://lorempixel.com/300/140/nature/1) no-repeat top left ,
  url(http://lorempixel.com/300/140/nature/2) no-repeat top right ,
  url(http://lorempixel.com/300/140/nature/3) no-repeat bottom left ,
  #ddd url(http://lorempixel.com/300/140/nature/4) no-repeat bottom right;
}

Démonstration

Images d'arrière-plan multiple en CSS3