HTML Images d'arrière-plan
Une image d'arrière-plan peut être spécifiée pour presque tous les éléments HTML.
Image de fond sur un élément HTML
Pour ajouter une image d'arrière-plan sur un élément HTML, utilisez l'attribut HTML style et l'attribut CSS background-image propriété :
Exemple
Ajoutez une image de fond sur un élément HTML :
<div style="background-image: url('img_girl.jpg');">
Try it Yourself »
Vous pouvez également spécifier l'image d'arrière-plan dans l'élément <style>, dans la section <head> :
Exemple
Spécifiez l'image d'arrière-plan dans l'élément <style> :
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Image d'arrière-plan sur une page
Si vous souhaitez que la page entière ait une image d'arrière-plan, vous devez spécifier l'image d'arrière-plan sur l'élément <body> :
Exemple
Ajoutez une image d'arrière-plan pour toute la page :
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Try it Yourself »
Répétition en arrière-plan
Si l'image d'arrière-plan est plus petite que l'élément, l'image se répétera, horizontalement et verticalement, jusqu'à atteindre la fin de l'élément :
Pour éviter que l'image d'arrière-plan ne se répète, définissez la propriété background-repeat sur no-repeat.
Exemple
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Try it Yourself »
Couverture de fond
Si vous souhaitez que l'image d'arrière-plan couvre l'intégralité de l'élément, vous pouvez définir la propriété background-size sur cover
De plus, pour vous assurer que l'intégralité de l'élément est toujours couverte, définissez la propriété background-attachment sur fixed:
De cette façon, l'image de fond couvrira la totalité de l'élément, sans étirement (l'image conservera ses proportions d'origine) :
Exemple
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Try it Yourself »
Étirement de l'arrière-plan
Si vous souhaitez que l'image d'arrière-plan s'étire pour s'adapter à l'ensemble de l'élément, vous pouvez définir la propriété background-size sur 100% 100%:
Essayez de redimensionner la fenêtre du navigateur et vous verrez que l'image s'étirera, mais couvrira toujours l'intégralité de l'élément.
Exemple
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Try it Yourself »
En savoir plus CSS
À partir des exemples ci-dessus, vous avez appris que les images d'arrière-plan peuvent être stylisées à l'aide des propriétés d'arrière-plan CSS.
Pour en savoir plus sur les propriétés de l'arrière-plan CSS, étudiez notre Tutoriel sur l'arrière-plan CSS.
