Propriété CSS background-size

La propriété background-size définit la taille de l'image de fond. Cette propriété a cinq valeur: auto, length, percentages, cover, contain.

"Auto" spécifie l'image de fond en sa taille originelle. Elle est la valeur initiale. "Length" spécifie la hauteur et la largeur de background image. Valeurs négatives sont invalides. "Percentage" définit la hauteuret la largeur de background-image en pourcentages. Valeurs négatives sont invalides.

"Cover" éscaille l'image aussi grande que possible sans étirement. Si les proportions de l'image différencient de l'élément, elle est coupée soit vérticalement, soit horizontalement, afin que l'espace vide reste.

"Contain" redimensionne l'image de fond, afin que l'image soit complètement visible.

Valeur initiale auto
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée Non.
Animable Oui. La taille de l'image de fond est animable.
Version CSS3
Syntaxe DOM object.style.backgroundSize = "50% 100%";

Syntaxe

background-size: auto | length | cover | contain | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/03/7d63bc08d3afd72d19eb11bff0939b634e64b997.png");
      background-size: 300px 200px;
      background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de background-size.</h2>
    <p>On peut placer quelques informations ici.</p>
  </body>
</html>

Résultat

Dans l'exemple donné, la valeur "length" est appliquée. Elle définit la largeur et la hauteur de l'image de fond. La première valeur définit la largeur, la deuxième définit la hauteur. S'il y a une valeur donnée, la deuxième est définit "auto".

Voyons un autre exemple, où la largeur et la hauteur de background-image sont définies en pourcentages.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-size: 40% 100%;
      background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de background-size.</h2>
    <p>On peut placer quelques informations ici.</p>
  </body>
</html>

Résultat

Voyons un exemple avec une valeur "cover", qui éscaille l'image aussi grande que possible sans étirement.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-size: cover;
      background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de background-size.</h2>
    <p>On peut placer quelques informations ici.</p>
  </body>
</html>

Valeurs

Valeur Description
auto La valeur initiale. Elle définit l'image de fond en sa taille originelle.
length Elle définit la largeur et la hauteur de l'image de fond. La première valeur définit la largeur, la deuxième définit la hauteur. S'il y a une valeur donnée, la deuxième est définit "auto". Spécifiée en “px”, “em”.
percentage Elle définit la largeur et la hauteuren pourcentage. La première valeur définit la largeur, la deuxième définit la hauteur. S'il y a une valeur donnée, la deuxième est définit "auto".
cover Elle éscaille l'image de fond aussi grande que possible pour qu'elle occupe tout l'espace de fond.
contain Elle éscaille l'image de fond à la taille plus grande, pour que sa largeur et hauter puissent complir la zone de contenu.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

15.0+ 4.0+
3.6 -moz-
7.0+ 11.5+
10.1 -o-


Trouvez-vous cela utile?

Articles Associées