mercredi 24 septembre 2014

Image d'arrière-plan avec une dimension précise

Je n'ai pas essayé encore et je ne connaissais pas ce truc. Je vais essayer bientôt... Ça me paraît très intéressant.

Trouvé sur http://www.startyourdev.com/css/style-css-background-size

Je développerai cela avec plus de détails quand j'aurai fait des essais


<div style="width:350px; height:80px; border:solid 1px black; padding:10px; border:solid 1px black; 
   background-image:url(exemple.png);"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan sans style spécifique associé 
   </div> 
</div> 

<div style="width:350px; height:80px; border:solid 1px black; padding:10px; 
   background-image:url(exemple.png); background-size:cover;"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan avec la propriété : 
      background-size:cover 
   </div> 
</div> 

<div style="width:350px; height:80px; border:solid 1px black; padding:10px; 
   background-image:url(exemple.png); background-size:contain;"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan avec la propriété : 
      background-size:contain 
   </div> 
</div> 

<div style="width:350px; height:80px; border:solid 1px black; padding:10px; 
   background-image:url(exemple.png); background-size:350px 200px;"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan avec la propriété : 
      background-size:350px 200px 
   </div> 
</div> 

Aucun commentaire:

Enregistrer un commentaire