Chargement...

Arrière-plans CSS

Vous savez colorer le texte. Maintenant peignez la surface derrière. Les arrière-plans remplissent la boîte de l’élément — couleurs unies, photos, puis dégradés — tandis que les lettres restent dessus avec color.

Qu’est-ce qu’un arrière-plan CSS ?

Un arrière-plan est la couche peinte derrière le contenu d’un élément (souvent aussi derrière le padding). Vous le contrôlez avec une famille de propriétés : background-color, background-image, background-repeat, background-size, background-position et le raccourci background. Les dégradés ont leur propre leçon — aujourd’hui remplissages unis et bases d’image.

Propriétés en un coup d’œil

Apprenez d’abord le rôle de chacune. Pas besoin de tous les mots-clés le premier jour.

📊 Propriétés d’arrière-plan CSS du quotidien

Propriété Rôle Départ quotidien
background-color Remplissage uni derrière le contenu background-color: #f1f5f9;
background-image Couche image (ou dégradé plus tard) background-image: url("hero.jpg");
background-repeat Carreler ou arrêter background-repeat: no-repeat;
background-size Mettre l’image à l’échelle dans la boîte background-size: cover;
background-position Aligner l’image background-position: center;
background Raccourci de plusieurs valeurs background: #0f172a url("a.jpg") center / cover no-repeat;

Remplissages unis avec background-color

L’arrière-plan le plus simple est une couleur unie. Utilisez toute valeur de couleur déjà connue — nommée, hex, rgb ou hsl.

Arrière-plan uni de carte

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

Garder le texte lisible

Mettez color pour les lettres et background-color pour la boîte. Remplissage clair → texte plus foncé ; remplissage sombre → texte plus clair.

Images avec background-image

Pointez un fichier avec url("…"). Les chemins sont relatifs au fichier CSS (ou URL absolues). L’image est derrière le contenu — ce n’est pas un <img> dans le flux HTML.

Photo derrière un bloc hero

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

Image vs <img>

Utilisez <img> quand la photo est du contenu (alt, sens). Utilisez background-image quand c’est une décoration derrière l’UI ou une section.

Arrêter le carrelage : no-repeat + cover

Par défaut beaucoup de navigateurs carrellent une petite image. Pour un hero, coupez le carrelage et mettez à l’échelle avec cover pour remplir la boîte.

Image hero qui remplit la boîte

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

cover en une phrase

cover agrandit jusqu’à remplir la boîte — les bords peuvent être coupés. contain fait tenir toute l’image — des bandes vides sont possibles.

Viser le point focal

background-position choisit quelle partie de la photo reste visible — utile quand cover coupe des visages ou des logos.

Viser la photo

css
CSS Code 
.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

Raccourci (restez lisible)

Vous pouvez combiner des valeurs dans background. Commencez en long pendant l’apprentissage ; passez au raccourci quand l’ordre est familier.

Raccourci background compact

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

Astuce d’ordre

Motif courant : couleur, image, position / size, repeat. Si le raccourci embrouille, repassez en propriétés séparées — les deux sont valides.

Essayez vous-même

  1. .card avec background-color: #f1f5f9 et texte sombre via color.
  2. .hero avec background-image: url("…"), min-height et texte clair.
  3. background-repeat: no-repeat, background-size: cover, background-position: center.
  4. Déplacez position vers left center ou right center et regardez ce qui reste cadré.
  5. Optionnel : réécrire le hero en raccourci background avec une couleur de secours avant url().

Erreurs fréquentes

  • Utiliser color pour remplir la boîte — cela ne peint que les lettres
  • Oublier no-repeat et voir un logo se carreler sur la section
  • Chemins url("…") cassés (mauvais dossier ou guillemets manquants)
  • Photos énormes non compressées en arrière-plan — pages lentes
  • Sauter aux dégradés complexes avant que uni + une image soient maîtrisés (dégradés ensuite)

En bref

  • Les arrière-plans peignent derrière le contenu ; color peint le texte
  • background-color pour l’uni ; background-image pour les photos
  • Contrôlez les photos avec no-repeat, cover/contain et position
  • Le raccourci est optionnel — la clarté bat l’astuce en apprenant
  • Recettes de dégradé complètes à la leçon suivante
  • Pratiquez une carte grise et un hero photo jusqu’à ce que les noms tiennent

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel