Image d'arrière-plan CSS

Table des matières

Image d'arrière-plan CSS

La propriété background-image spécifie une image à utiliser comme arrière-plan d'un élément.

Par défaut, l'image est répétée afin de couvrir la totalité de l'élément.

Exemple

Définir l'image d'arrière-plan d'une page :

body {
  background-image: url("paper.gif");
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Exemple

Cet exemple montre une mauvaise combinaison de texte et d'image d'arrière-plan. Le texte est difficilement lisible :

body {
  background-image: url("bgdesert.jpg");
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

Remarque : Lorsque vous utilisez une image d'arrière-plan, utilisez une image qui ne perturbe pas le texte.

L'image d'arrière-plan peut également être définie pour des éléments spécifiques, comme l'élément <p> :

Exemple

 p {
  background-image: url("paper.gif");
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>

La propriété d'image d'arrière-plan CSS

background-image: Définit l'image d'arrière-plan d'un élément