Comment mettre une image de fond en HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2018-09-24 19:00:38

Question

Comment mettre une image de fond sur une page en HTML ?

Réponse

En HTML, les images de fond sont définies à l'aide de feuilles de style CSS. CSS vous permet de définir une image de fond pour tout élément HTML. De plus, vous pouvez spécifier sa position, si elle doit se répéter sur la page, comment elle doit se répéter, etc.

Remarque : Les images de fond sont généralement appliquées à la balise BODY, mais vous pouvez les appliquer à toutes autres balises HTML.

Voici le code CSS de base pour mettre une image de fond à la balise HTML BODY avec CSS :

body {
background-image:url(img/image.png);
}

Remarque : Le code ci-dessus peut soit être intégré dans un fichier CSS du type style.css, ou bien directement dans le code HTML de votre page entre les balises STYLE :

<style>
    body {
    background-image:url(img/image.png);
    }
</style>

Voici quelques options et paramètres que vous pouvez ajouter pour votre image de fond en HTML :

/* Couleur de fond utilisée si l'image n'est pas disponible */
background-color: #fff;

/* Taille en hauteur de l'image de fond */
height: 200px; 

/* Centrer l'image de fond sur la page */
background-position: center; 

/* Ne pas répéter l'image de fond */
background-repeat: no-repeat;

/* Redimensionner l'image pour qu'elle s'étende sur toute la page ou le conteneur */
background-size: cover; 

/* Ajouter plusieurs images de fond superposées */
background-image: url("image01.png"), url("image02.png");

/* spécifier l'emplacement de l'image d'arrière-plan. */
/* border-box - l'image de fond commence à partir du coin supérieur gauche de la bordure */
/* padding-box - (par défaut) l'image d'arrière-plan commence à partir du coin supérieur gauche du bord de remplissage */
/* content-box - l'image d'arrière-plan commence à partir du coin supérieur gauche du contenu  */
background-origin: content-box;

Voici un exemple de page HTML avec une image de fond :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment mettre une image de fond en HTML ?</title>
<style>
body {
  background-image:url(https://www.collaborativejob.com/bgd.jpg);
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover; 
}
</style>
</head>
<body>
</body>
</html>