Comment Ajouter une Image de Fond

Laissez-nous vous montrer comment ajouter et positionner une image d’arrière-plan dans votre document HTML à l'aide de styles CSS.

Pour positionner une image de fond, utilisez les propriétés CSS suivantes:

  • background-image: (définit une ou plus images d’arrière-plan pour un élément)
  • background-repeat: (définit si/comment une image d’arrière-plan doit être répétée)
  • background-attachment: (définit si une image d’arrière-plan défile avec le reste de la page, ou est fixe)
  • background-position: (définit la position de départ d'une image d'arrière-plan)

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
      <style>
         body {
         background-image:url('https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg');
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position: center;
      </style>
   </head>
   <body>
   </body>
</html>

Dans l’exemple donné l’image de fond est positionnée au centre (vous pouvez utiliser d’autres valeurs telles que : en haut à gauche ; centre gauche ; En bas à gauche ; en haut à droite ; au centre droit en bas à droite etc.).

Voici quelques moyens de positionner une image de fond:

  • Répéter verticalement ou horizontalement
  • Pas de répétition
  • Page entière
  1. Utilisez les valeurs des propriétés suivantes pour répéter une image d’arrière-plan verticalement ou horizontalement:
  • repeat (l’image de fond est répétée verticalement et horizontalement
  • repeat-x (l’image de fond est répétée seulement horizontalement)
  • repeat-y (l’image de fond n'est répétée que verticalement)

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
      <style>
         body {background-image: 
         url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
         background-repeat: repeat-y; }       
      </style>
   </head>
   <body>
   </body>
</html>

Dans l’exemple donné l’image d’arrière-plan est répétée seulement vertically.

  1. Utilisez la propriété no-repeat pour ne pas répéter une image de fond (l’image sera affichée une fois).

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
      <style>
         body {
         background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
         background-repeat: no-repeat;}   
      </style>
   </head>
   <body>
   </body>
</html>
  1. Pour créer une image de fond de page entière avec CSS, ajoutez l'image de fond au conteneur de la hauteur : 100%

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         body, html {  height: 100%;margin: 0;}
         .bg {
         /* The image used */
         background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
         /* Full height */
         height: 100%;
         /* Center et dimensionnez l'image bien */
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;  }
      </style>
   </head>
   <body>
      <div class="bg"></div>
   </body>
</html>

Pour avoir une image d'arrière-plan transparente, utilisez la propriété opacity qui spécifie la transparence d'un élément. Prenez une valeur de 0,0 à 1,0. pour réduire la transparence (par exemple 0,2 est flou, 0,5 rend la moitié transparente).

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>Titre du document</title>
      <style>
         img { opacity: 0.5;
         filter: alpha(opacity=50); /* For IE8 and earlier */}
      </style>
   </head>
   <body>
      <img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg"
         width="300" height="150">
   </body>
</html>

L'exemple mentionné ci-dessus est une image avec une opacité de 50%.

Dans IE8 et versions antérieures, le filtre: alpha (opacité = x) est utilisé, où vous pouvez définir une valeur de 0 à 100.