NetPlusMédia

Images d'arrière-plan multiple en CSS3

Retour

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

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Images d&#39;arri&egrave;re-plan multiple en CSS3</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='arriere-plan-multiple.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <div class="arriere_plan_multiple"></div>
  17.  
  18.  
  19. <!-- Javascript -->
  20.  
  21. </body>
  22. </html>

arriere-plan-multiple.css

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

Démonstration

Images d'arrière-plan multiple en CSS3

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter