Propriété CSS background-image
La propriété CSS background-image spécifie les images du fond pour des éléments. On peut utiliser une ou plusieurs images.
Par défaut, background-image est placé au coin supérieur gauche d'un élément; elle est répétée verticalement et horizontalement à la fois.
L'arrière-plan de l'élément est sa taille totale, donc il comprend padding et border, mais pas margin.
Si l'image, qu'on définit, n'est pas disponible, on doit définir la background-color.
| Valeur initiale | none |
| Appliquée à | Tous les éléments. Elle est appliquée aussi à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1 + quelques nouvelles valeurs en CSS3 |
| Syntaxe DOM | object.style.backgroundImage = "url(img_tree.png)"; |
Syntaxe
background-image: url | none | linear-gradient | radial-gradient | repeat-linear-gradient | repeat-radial-gradient | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background-image</h2>
<p>Hello World!</p>
</body>
</html>Voyons un autre exemple, où deux images sont utilisées et elles sont spécifiées à l'aide de la propriété background-position.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-attachment: fixed;
background-position: 5px 50px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h2>Exemple de la propriété background-image</h2>
<p>L'image du fond est positionée 5px du gauche, et 50px ver le bas du haut.</p>
</body>
</html>Dans cet exemple, "linear-gradient" avec deux couleurs est spécifié comme l'image du fond pour un élément <div> :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
background-image: linear-gradient(#eee, #1c87c9 );
}
</style>
</head>
<body>
<h2>Linear gradient comme une image du fond</h2>
<p>Ce gradient linéaire commence en haut. Cela commence gris, en transition à bleu:</p>
<div></div>
</body>
</html>Voici un exemple avec la valeur "repeating-radial-gradient" avec trois couleurs.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
div {
height: 300px;
background-color: #cccccc;
background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
}
</style>
</head>
<body>
<h2>Linear gradient comme une image du fond</h2>
<div></div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| url | Définit l'url de l'image. On peut spécifier plus qu'une image séparées par virgules. |
| none | Il n'y aura pas aucune image du fond. C'est la valeur initiale. |
| linear-gradient | Un gradient linéaire est spécifié comme l'image du fond. |
| radial-gradient | Un gradient radial est spécifié comme l'image du fond. |
| repeat-linear-gradient | Répéte un gradient linéaire. |
| repeat-radial-gradient | Répéte un gradient radial. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de son élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 15.0+ |
4.0+ 3.6 -moz- |
7.0+ |
11.5+ 10.1 -o- |
Pratiquez vos connaissances
