HTML 5 - 4.7 : Comment ajouter des images ou des arrières plans

L'ajout d'arrière-plans d'image se fait via la propriété CSS background-image: url('chemin/image.jpg');. La propriété background-size: 100%; redimensionne l'image pour couvrir 100% de la largeur du conteneur, indépendamment de la taille de l'écran. La propriété background-repeat: no-repeat; empêche l'image de se répéter en tuile ; sans cette propriété, l'image s'affiche en mosaïque si elle ne remplit pas tout l'espace.

Quand du texte repose sur un arrière-plan d'image, la lisibilité peut souffrir. La solution : envelopper le texte dans un conteneur avec une background-color opaque (par exemple blanc) et un padding pour créer de l'espace. Augmenter la font-size et appliquer font-weight: bold; améliore le contraste. Utiliser color pour un texte foncé sur fond clair (ou vice versa) assure la lisibilité.

Exemple complet : #main-article { background-image: url('background.jpg'); background-size: 100%; background-repeat: no-repeat; margin: -20px; padding: 20px; } header p { background-color: white; color: black; font-size: large; font-weight: bold; padding: 10px; } crée un conteneur avec fond d'image et du texte bien visible superposé. La marge négative ajuste le positionnement, tandis que le padding isole visuellement le contenu.

En résumé

Cette leçon explique comment intégrer une image de fond à une page HTML5 en utilisant la propriété CSS `background-image`. Vous apprendrez à contrôler l'affichage de l'image avec `background-size: 100%` et `background-repeat: no-repeat`, puis à styliser le texte par-dessus pour améliorer la lisibilité. Des exemples pratiques montrent comment ajuster l'espacement avec padding et marges négatives pour un rendu optimal sur tous les types d'écrans.

Points clés

Utiliser `background-image: url()` pour ajouter une image de fond à un élément HTML
Appliquer `background-size: 100%` pour adapter l'image à la taille de son conteneur
Ajouter `background-repeat: no-repeat` pour empêcher la répétition de l'image
Modifier les propriétés de texte (`color`, `font-size`, `font-weight`, `background-color`) pour assurer la lisibilité sur fond d'image
Utiliser les marges négatives et padding pour ajuster l'espacement et l'alignement du contenu

Questions fréquentes

Quelle est la différence entre `background-image` et `background-color` ?

`background-color` applique une couleur unie de fond, tandis que `background-image` intègre une image. Vous utiliserez `background-image` quand vous voulez afficher une image en arrière-plan et `background-color` pour une couleur simple.

Pourquoi mon image de fond se répète-t-elle sur toute la page ?

Par défaut, CSS répète (tile) l'image pour remplir l'espace disponible. Pour éviter cela, ajoutez `background-repeat: no-repeat` à votre déclaration CSS.

Comment rendre le texte lisible quand il y a une image de fond ?

Vous pouvez ajouter un `background-color` au conteneur du texte, augmenter la `font-size` et le `font-weight`, et ajuster la `color` du texte pour un meilleur contraste avec l'image.