Images d'arrière-plan HTML
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 de fond sur un élément HTML, utilisez l' styleattribut HTML et la propriété CSSbackground-image :
Exemple
Ajoutez une image de fond sur un élément HTML :
<div style="background-image: url('img_girl.jpg');">
Vous pouvez également spécifier l'image de fond dans l' <style>
élément, dans la <head>
section :
Exemple
Spécifiez l'image d'arrière-plan dans l' <style>
élément :
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Image d'arrière-plan sur une page
Si vous souhaitez que toute la page ait une image de fond, vous devez spécifier l'image de fond sur l' <body>élément :
Exemple
Ajoutez une image de fond pour toute la page :
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Répétition du fond
Si l'image de fond est plus petite que l'élément, l'image se répétera, horizontalement et verticalement, jusqu'à ce qu'elle atteigne la fin de l'élément :
Exemple
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Pour éviter que l'image d'arrière-plan ne se répète, définissez la background-repeatpropriété sur no-repeat.
Exemple
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
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 background-sizepropriété sur
cover.
De plus, pour vous assurer que l'élément entier est toujours couvert, définissez la
background-attachmentpropriété surfixed:
De cette façon, l'image de fond couvrira tout l'élément, sans étirement (l'image gardera ses proportions d'origine) :
Exemple
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
É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 background-sizepropriété 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>
En savoir plus CSS
Dans les 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 d'arrière-plan CSS, étudiez notre didacticiel d'arrière-plan CSS .