Chapitre 5 : Fond et images
Maîtrisez les propriétés CSS pour créer des arrière-plans visuellement attrayants avec des couleurs, images et dégradés.
1. La propriété background-color
Permet de définir la couleur d'arrière-plan d'un élément.
div {
background-color: #e0f7fa;
}
background-color: #e0f7fa;
}
2. Ajouter une image de fond
On utilise background-image avec l'URL de l'image.
body {
background-image: url('images/fond.jpg');
}
background-image: url('images/fond.jpg');
}
On peut contrôler :
background-repeat:repeat,no-repeat,repeat-x,repeat-ybackground-position:center,top right, etc.background-size:cover,contain,autobackground-attachment:scroll(défaut),fixed(effet parallax)
body {
background-image: url('fond.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
background-image: url('fond.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
3. Superposer plusieurs fonds
On peut empiler plusieurs images ou couleurs :
div {
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url('fond.jpg');
background-size: cover;
}
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url('fond.jpg');
background-size: cover;
}
Utile pour assombrir une image en arrière-plan.
4. Dégradés CSS
Pas besoin d'image pour créer des effets de fond élégants :
4.1 Dégradé linéaire
div {
background: linear-gradient(to right, #6a11cb, #2575fc);
}
background: linear-gradient(to right, #6a11cb, #2575fc);
}
4.2 Dégradé radial
div {
background: radial-gradient(circle, #ff8a00, #e52e71);
}
background: radial-gradient(circle, #ff8a00, #e52e71);
}
5. Opacité du fond
Avec la propriété opacity ou des couleurs RGBA :
div {
background-color: rgba(0, 0, 0, 0.5); /* fond semi-transparent */
}
background-color: rgba(0, 0, 0, 0.5); /* fond semi-transparent */
}
Attention : opacity s'applique à tout l'élément, pas seulement le fond.
6. Bonnes pratiques
- Utiliser
background-size: coverpour adapter une image à l'écran - Privilégier les dégradés CSS pour la performance
- Ajouter une couleur de secours en cas d'échec du chargement d'image
7. À éviter
- Mettre des images de fond lourdes (impact performance)
- Superposer du texte sans contraste suffisant avec le fond
- Utiliser
opacitysur des éléments contenant du texte (préférer RGBA)
8. Exercice pratique
Objectif : Créer un bloc avec une image de fond et un titre lisible.
Consignes :
- Créer un bloc
<div class="hero">avec un titre<h1>à l'intérieur - Mettre une image de fond centrée et en
cover - Ajouter un dégradé sombre par-dessus pour rendre le texte lisible
- Styliser le texte en blanc et centré
Exemple CSS :
.hero {
height: 300px;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('images/montagne.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.hero h1 {
color: white;
font-size: 2em;
}
height: 300px;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('images/montagne.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.hero h1 {
color: white;
font-size: 2em;
}
9. À retenir
background-imagepermet de styliser les arrière-plans avec précision- Les dégradés CSS remplacent efficacement des images
- Des propriétés comme
background-sizeetbackground-positionassurent un rendu adaptatif