HTML Images de Fond
Une image de fond peut être spécifiée pour presque n'importe quel élément HTML.
Image de Fond sur un Élément HTML
Pour ajouter une image de fond à un élément HTML, utilisez l'attribut HTML style et la propriété CSS background-image :
Exemple
Ajoutez une image de fond à un élément <p> :
<p style="background-image: url('img_girl.jpg');"> Vous pouvez également spécifier l'image de fond dans l'élément <style> , dans la section <head> :
Exemple
Spécifiez l'image de fond dans l'élément <style> :
<style>
p {
background-image: url('img_girl.jpg');
}
</style> Image de Fond 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'élément <body> :
Exemple
Ajoutez une image de fond pour toute la page :
<style>
body {
background-image: url('img_girl.jpg');
}
</style> Répétition de Fond
Si l'image de fond est plus petite que l'élément, elle se répétera horizontalement et verticalement jusqu'à atteindre la fin de l'élément :
Exemple
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style> Pour éviter que l'image de fond 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> Couverture de Fond
Si vous souhaitez que l'image de fond couvre l'ensemble de l'élément, vous pouvez définir la propriété background-size sur cover.
De plus, pour vous assurer que l'ensemble de l'élément est toujours couvert, définissez la propriété background-attachment sur fixed.
Ainsi, l'image de fond couvrira l'ensemble de l'élément sans s'étirer (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> Étirement de Fond
Si vous souhaitez que l'image de fond 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 tout en couvrant toujours l'ensemble 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 sur CSS
D'après les exemples ci-dessus, vous avez appris que les images de fond peuvent être stylisées en utilisant les propriétés CSS de fond.
Pour en savoir plus sur les propriétés CSS de fond, consultez notre Tutoriel sur les Arrière-plans CSS .