Accueil    CSS    Propriété Background-size
 



style css background-size  Style CSS background-size

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété background-size permet de définir la taille de l'image utilisée comme arrière-plan du conteneur. Par défaut, l'image est affichée avec sa taille réelle et est tronquée si elle dépasse la taille du conteneur ou bien répétée si elle est plus petite que celui-ci (il faut positionner la propriété background-repeat:no-repeat pour éviter cela).

La propriété "cover" indique qu'il faut adapter l'image à la longueur du conteneur, la propriété "contain" indique que l'image doit cette fois être adaptée à la hauteur de l'élément.
Dans les deux cas, les proportions de l'image d'origine sont conservées.

Si les images employées sont petites, le rendu sera pixelisé car l'image sera étirée à la taille du conteneur.



Propriétés pour le style background-size :




Propriété Définition Valeurs CSS
background-size Défini la taille de l'image utilisée comme arrière-plan du conteneur contain
cover
px
%
CSS 3


Exemple d'utilisation du style css background-size :






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





Exemple d'arrière plan sans style spécifique associé





Exemple d'arrière plan avec la propriété :
background-size:cover





Exemple d'arrière plan avec la propriété :
background-size:contain





Exemple d'arrière plan avec la propriété :
background-size:350px 200px