Couleur et image d’arrière-plan
Appliquez des couleurs et des images d’arrière-plan avec les propriétés background-color et background-image.
Couleur et image d’arrière-plan est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
background-color
La propriété background-color définit une couleur unie derrière un élément. Elle accepte toute valeur de couleur CSS et reste visible à travers les zones transparentes des images d’arrière-plan.
<div class="hero">Hero section</div>
background-image
background-image définit une ou plusieurs images comme arrière-plan de l’élément. Les images sont superposées au-dessus de background-color.
<div class="banner">Banner (image missing → fallback color shows)</div>
background-size
background-size contrôle les dimensions de l’image. Voici les principales valeurs :
cover— remplit la zone et recadre l’image si nécessairecontain— ajuste entièrement l’image à l’intérieur, mais peut laisser des espaces100% 100%— étire l’image pour remplir exactement la zone
<div class="hero"></div>
background-position
background-position définit l’emplacement de l’image. Utilisez des mots-clés ou des valeurs en pourcentage ou en longueur.
<div class="hero"></div>
background-repeat
Par défaut, les images se répètent en mosaïque. Contrôlez cette répétition avec background-repeat :
<div class="hero"></div>
<div class="pattern"></div>
background-attachment
background-attachment détermine si une image défile avec la page. fixed crée un effet semblable à un effet de parallaxe ; scroll est la valeur par défaut.
<div class="spacer">Scroll down ↓</div>
<div class="parallax">Fixed background</div>
<div class="spacer">Scroll up ↑</div>
Arrière-plans multiples
CSS prend en charge plusieurs calques d’arrière-plan séparés par des virgules. Le premier calque indiqué apparaît au-dessus des autres.
<div class="card">Overlay + photo layers</div>
Notation abrégée background
La notation abrégée background regroupe toutes les propriétés d’arrière-plan dans une seule déclaration. L’ordre est important pour la taille : écrivez-la après la position en les séparant par /.
<div class="hero"></div>
Clip et origine de l’arrière-plan
background-clip contrôle l’emplacement où l’arrière-plan est peint par rapport au modèle de boîte. background-origin définit le point de référence utilisé pour le positionnement.
<div class="card">Clip & Origin</div>
Découpage de l’arrière-plan selon le texte
Utilisez background-clip: text avec une couleur de texte transparente pour découper une image d’arrière-plan ou un dégradé selon la forme du texte.
<h1>Gradient Text</h1>
object-fit pour <img> et background-image
Pour les balises <img>, utilisez object-fit: cover et object-position plutôt que background-image. Les images restent ainsi dans le DOM, ce qui favorise l’accessibilité et le référencement.
<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />
Vérification rapide
Quelle valeur de background-size remplit la zone et recadre l’image au lieu de laisser des espaces ?
Récapitulatif
Utilisez background-color comme solution de repli sous les images. background-size: cover est la valeur de référence pour les grandes images de couverture. Les calques d’arrière-plan multiples offrent de puissantes possibilités de composition. La notation abrégée regroupe toutes les propriétés d’arrière-plan de manière concise.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Couleur et image d’arrière-plan » est-elle gratuite ?
Oui — le texte complet de « Couleur et image d’arrière-plan » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Couleur et image d’arrière-plan » ?
Appliquez des couleurs et des images d’arrière-plan avec les propriétés background-color et background-image. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Couleur et image d’arrière-plan » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Valeurs de couleur : nommées, hexadécimales, RGB, HSL
- Couleur et image d’arrière-plan
- Dégradés : linéaires et radiaux
- Opacité et transparence RGBA