Comment Redimensionner les Images de l'Arrière-plan Avec CSS3

Les images de l'arrière-plan peuvent être redimensionnées et mise à l'échelle. En CSS2.1, les images de l'arrière-plan définies à un conteneur, ont gardé leur dimension fixe. Heureusement, CSS3 représente la propriété background-size qui permet aux arrière-plans d'être étendus ou écrassés. C'est parfait si vous utilisez les téchniques Responsive Web Design pour créer un gabarit.

Quelques méthodes différentes seront affichées ici:

Redimensionnement de façon absolue

Lorsqu'on définit une image de l'arrière-plan, par défaut, la largeur et la hauteur de l'image sont définies à "auto" qui conserve la taille initiale de l'image. Et si on a besoin de la redimensionner, on peut utiliser des mesures absolues pour avoir une nouvelle taille, there can be used absolute measurements to have a new size, par exemple, px, em, cm, etc.

Les mesures de la longueur peuvent être faites à l'aide de la propriété background-size avec une mesure absolue.

Lors du redimensionnement de l'image, le rapport d'aspect (la zone visible et la forme d'affichage) doit être conservé. Sinon, l'image pourrait être déformée et perdre une partie de la qualité de l'image.

Voyons un exemple de l'image de l'arrière-plan redimensionnée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Image de l'arrière-plan redimensionnée</title>
    <style>
      .resized {
        width: 400px;
        height: 300px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 300px 200px;
        background-repeat: no-repeat;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Image de l'arrière-plan redimensionnée</h2>
    <div class="resized"></div>
  </body>
</html>

Redimensionnement Relatif En Utilisant des Pourcentages

Il peut être utile pour les conceptions réactives à utiliser une valeur de pourcentage. Lorsqu'on utilise une valeur de pourcentage, la dimension est à la base de l'élément englobant et pas de la taille de l'image. Si la propriété background-size est définie à "100% 100%", l'image de l'arrière-plan sera étendue pour couvrir la zone entière du contenu.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Image de l'arrière-plan redimensionnée</title>
    <style>
      .resized {
        width: 100%;
        height: 400px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border: 2px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Image de l'arrière-plan redimensionnée</h2>
    <div class="resized"></div>
  </body>
</html>
Cependant, la largeur de l'arrière-plan dépend sur la taille de son conteneur. Et il n'est pas recommandé d'utiliser des pourcentages quand vous avez une certaine largeur pour votre conteneur.

Mise à l'Échelle de la Taille Maximum

Quand la propriété background-size est définie à sa valeur "contain", l'image de l'arrière-plan va être mise à l'échelle en essayant de remplir la zone de contenu. L'image, de toute façon, va obtenir son rapport d'aspect (la relation proportionnelle entre la largeur et la hauteur de l'image).

La valeur "contain" spécifie que l'image de l'arrière-plan doit être mise à l'échelle quelle que soit la taille du conteneur pour que chaque côté soit aussi large que possible sans dépasser la longueur du côté correspondant du conteneur.

Autrement dit, la taille de l'image va augmenter ou diminuer proportionnellement, mais les dimensions du conteneur ne dépasseront pas la largeur et la hauteur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Image de l'arrière-plan redimensionnée et sensible</title>
    <style>
      .resized {
        width: 100%;
        height: 400px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Image de l'arrière-plan redimensionnée et sensible</h2>
    <p>Redimensionnez le navigateur pour voir l'effet:</p>
    <div class="resized"></div>
  </body>
</html>

Couvrir l'arrière-plan

Losque la propriété background-size est définie à sa valeur "cover", l'image de l'arrière-plan sera mise à l'échelle pour couvrir la zone entière du contenu. L'image est mise à l'échelle pour remplir le conteneur entier, mais l'image sera coupée si elle a un rapport d'aspect différent.

La valeur "cover" spécifie la taille de l'image de l'arrière-plan à être aussi petite que possible lors de of the background image to be as small as possible tout en veillant à ce que les deux dimensions soient supérieures ou égales à la taille correspondante du conteneur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Image de l'arrière-plan redimensionnée et sensible</title>
    <style>
      .resized {
        width: 100%;
        height: 400px;
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: cover;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <h2>Image de l'arrière-plan redimensionnée et sensible</h2>
    <p>Redimensionnez le navigateur pour voir l'effet:</p>
    <div class="resized"></div>
  </body>
</html>

Définir des Différents Arrière-plans Pour les Différents Appareils

Une grande image sur un large écran d'un ordinateur était parfait, mais sur un petit appareil, il sera un moins que rien. Pourquoi charger une grande image si vous si vous devez encore le réduire?

Vous pouvez utiliser des renseignements des médias pour afficher des images différentes sur des appareils différents pour réduire la charge.

Ici la règle @media est utilisée. Dans cet exemple, il y a une large image et une plus petite image qui est définie à être affichée sur les appareils différents. Vous allez voir l'effet lorsque vous redimensionnez la largeur du navigateur et l'image de l'arrière-plan va changer à 400px. Pour voir l'effet clairement, basculez la barre d'outils de l'appareil et ayez une vue mobile.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Image de l'arrière-plan redimensionnée et sensible</title>
    <style>
      /* Pour largeur inférieure à 400px: */
      body {
        background-repeat: no-repeat;
        background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
      }
      /* Pour largeur 400px et plus: */
      @media only screen and (min-width: 400px) {
        body {
          background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg");
        }
      }
    </style>
  </head>
  <body>
    <p style="margin-top: 220px;">
      Redimensionnez la largeur du navigateur et l'image de l'arrière-plan va changer à 400px. Pour voir l'effet plus clairement, basculez la barre d'outils de l'appareil et ayez une vue mobile.
    </p>
  </body>
</html>