Comment Définir la Taille de l'Image d'Arrière-Plan?

Les images d'arrière-plan rend notre page plus unique et visuellement attrayante pour les utilisateurs. La taille de background-image a un grand importance.

Si vous voulez définir la taille de background-image, vous êtes au bon endroit. Pour cet objectif, vous devez utiliser la propriété background-size. Dans ce snippet, nous allons vous montrer comment faire ça.

Voyons un exemple et essayons de discuter chaque partie du code ensemble.

1. Créez HTML.

Créez une balise HTML <h2> et y insérez un titre.
Créez une balise <div> avec un nom "image" de l'id.

<body>
  <h2>Définir la taille de l'image d'arrière-plan</h2>
  <div id="image"></div>
</body>

2. Ajoutez CSS.

Définissez height et width de l'id "image".
Ajoutez l'URL de votre image.
Définissez la taille de votre image avec la propriété background-size.

#image {
  height: 200px;
  width: 200px;
  background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
  background-size: 200px 200px;
}

Vous pouvez changer la taille de votre image en utilisant des pourcentages. La propriété background-size a des valeurs différents telles que auto, cover, contain. Dans cet exemple, on utilise la valeur length dans lequel la première valeur définit la largeur et la deuxième définit la hauteur.

Rassemblons les parties de code et voyons comment cela fonctionne!

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #image {
        height: 200px;
        width: 200px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-size: 200px 200px;
      }
    </style>
  </head>
  <body>
    <h2>Définir la taille de l'image d'arrière-plan</h2>
    <div id="image"></div>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple, dans lequel nous utilisons de pourcentages pour spécifier la taille de l'image d'arrière-plan.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1523800503107-5bc3ba2a6f81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
        background-size: 70% 400%;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la taille de l'image de fond.</h2>
    <p>Ici on peut écrir n'importe quelle information.</p>
  </body>
</html>

Essayez-vous-même!

Ici nous avons utilisée la propriété background-repeat avec la valeur "no-repeat". La propriété background-repeat définit comment l'image d'arrière-plan doit être répétée. Lorsque vous définissez la valeur "no-repeat", l'image d'arrière-plan n'est pas répétée.