Chapitre 150 | Image en Background

Image en Background

Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications.

Explications détaillées

1. Structure HTML

• Le fichier HTML contient un élément div avec la classe background-div.
• Ce div est une boîte vide qui servira uniquement à afficher une image en arrière-plan.

---

2. Styles CSS

1. Dimensions du div :
   • width: 300px : fixe la largeur du div à 300 pixels.
   • height: 200px : fixe la hauteur du div à 200 pixels.
   • Sans ces dimensions, le div n’apparaîtrait pas car il serait « invisible ».
2. Image d’arrière-plan :
   • background-image: url('https://via.placeholder.com/1920x1080') : définit l’image à utiliser comme arrière-plan.
   • L’URL utilisée est un placeholder d’exemple (vous pouvez remplacer par l’URL de votre propre image).
3. Ajustements de l’image :
   • background-repeat: no-repeat : empêche que l’image se répète (par défaut, une image répétée remplirait le div).
   • background-size: cover : adapte l’image pour qu’elle couvre entièrement le div, même si elle est recadrée.
   • background-position: center : centre l’image horizontalement et verticalement dans le div.

Ce que vous devez retenir

1. Dimensions obligatoires : Un div doit avoir une largeur et une hauteur pour afficher une image en arrière-plan.
2. Propriétés essentielles pour une image d’arrière-plan :
   • background-image : ajoute l’image.
   • background-repeat : contrôle la répétition de l’image.
   • background-size : ajuste la taille de l’image.
   • background-position : positionne l’image.

Variations d’affichage

Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications.

Picsum.photos est un service gratuit qui fournit des photos aléatoires ou spécifiques comme placeholders pour le prototypage et le design. Facile à utiliser, il génère des images de dimensions personnalisées via une simple URL, avec des options comme le flou ou les niveaux de gris. Les photos proviennent de la collection libre de droits Unsplash.

Explication des exemples CSS

Exercice

Partez d’un PEN totalement vierge.

Voici deux images :
https://picsum.photos/id/1011/800/600
https://picsum.photos/id/1012/800/600

Créez deux conteneurs.
Sur le premier, ajoutez une image en background en mode contain center
Sur le second, ajoutez une image en background en mod cover center

Vous êtes perdu ?