Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Arrière-plans : images, dégradés et superposition | SovranCode

Contenu du coursBackgrounds, Borders, and Visual Layers · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS60 min

Backgrounds, Borders, and Visual Layers

Compose resilient surfaces with layered backgrounds, images, borders, radii, and contrast-aware decoration.

Les arrière-plans se dessinent derrière le contenu et la bordure d’un élément, sans changer la structure du document. Les couches sont déclarées du premier plan vers le fond. Chacune peut avoir sa propre image, sa position, sa taille et sa répétition. Une couleur de fond reste utile si une image manque ou comporte des zones transparentes.

Comprendre l’ordre des couches

Repérez d’abord la couleur de fond, le dégradé et l’image. Regardez dans quel ordre ils sont déclarés, puis cherchez ce qui garantit la lisibilité du texte avant de modifier le code.

.hero { background-color: #17324d; background-image: linear-gradient(90deg, rgb(23 50 77 / .88), rgb(23 50 77 / .35)), url('/images/home/learning-paths.jpg'); background-size: cover; background-position: center; color: white; border: 2px solid rgb(255 255 255 / .35); border-radius: 1rem; }

Les bons réflexes

Vérifiez que le texte reste lisible lorsque l’image de fond ne se charge pas.
Vérifiez que les coins arrondis et le débordement ne masquent ni le contenu ni l’indicateur de focus.
Réservez les images de fond à la décoration ; gardez les informations essentielles dans le HTML.

ATELIER CSS · ENVIRON 30 MIN

Créer un bandeau qui reste lisible sans son image

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Superposer les fonds sans modifier la mise en page

Un arrière-plan se dessine dans la boîte de l’élément sans lui donner de taille intrinsèque. Les images de fond sont séparées par des virgules : la première de la liste apparaît au-dessus des suivantes. Les listes de tailles, de positions et de répétitions correspondent à ces couches ; lorsqu’une liste est plus courte, ses valeurs se répètent selon les règles CSS. Attention à la propriété raccourcie background : elle réinitialise les sous-propriétés omises. Une couleur ne peut figurer que dans la dernière couche de ce raccourci. Choisissez une couleur de repli qui préserve la lisibilité si l’image est absente, lente à charger ou désactivée. Si une règle fait disparaître une couche, examinez les valeurs calculées des propriétés de fond.

Choisir le recadrage avec cover, contain et la position

background-size: cover remplit la zone, au prix d’un éventuel recadrage. contain conserve l’image entière, mais peut laisser de l’espace libre. Aucune de ces options ne rend accessible un texte essentiel intégré à l’image. La position détermine la partie visible quand le recadrage change : testez donc l’image réelle dans un cadre étroit puis large. Pour une image de contenu qui demande un texte alternatif, des dimensions ou plusieurs sources adaptées, utilisez plutôt img ou picture. Les effets de background-attachment peuvent varier sur mobile et poser des problèmes de performance ou de mouvement ; ils restent une décoration facultative.

Les bordures dessinent des contours, pas le sens du contenu

Les bordures occupent de l’espace dans le modèle de boîte ; tenez-en compte dans le dimensionnement. Un outline ne modifie pas la mise en page et convient souvent à l’indicateur de focus. border-radius arrondit les coins, mais un enfant peut dépasser cette courbe si aucun découpage n’est prévu. Évitez d’ajouter overflow: hidden uniquement pour obtenir des coins arrondis si cela coupe le focus, une fenêtre contextuelle ou du contenu. Les propriétés logiques de bordure peuvent suivre le sens d’écriture. Un séparateur décoratif doit renforcer un regroupement qui reste compréhensible sans lui. Testez aussi les modes de contraste élevé ou de couleurs forcées, qui peuvent remplacer votre palette.

Retirez d’abord uniquement la couche url(...), puis le dégradé, et observez ce qui assure le fond à chaque étape. Réduisez la largeur de l’aperçu pour examiner le recadrage de l’image.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { margin:0; padding:2rem; font:1rem/1.7 system-ui; color:#142536; }
.hero { max-width:48rem; padding:clamp(2rem,7vw,5rem); color:white; background-color:#17324d; background-image:linear-gradient(90deg,rgb(23 50 77 / .96),rgb(23 50 77 / .38)),url("/images/home/learning-paths.jpg"); background-size:cover; background-position:center; border:2px solid #8ba3ba; border-radius:1rem; }
.hero a { color:white; text-underline-offset:.25em; }
.eyebrow { font-weight:800; letter-spacing:.1em; }
</style>
</head>
<body>
<section class="hero"><p class="eyebrow">GUIDE PRATIQUE CSS</p><h1>Des fonds superposés, un texte toujours lisible</h1><p>Le message reste dans le HTML ; CSS apporte l’ambiance visuelle.</p><a href="#details">Lire les choix de conception</a></section><p id="details">Retirez l’image de fond et vérifiez que chaque mot reste lisible.</p>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { margin:0; padding:2rem; font:1rem/1.7 system-ui; color:#142536; }
.hero { max-width:48rem; padding:clamp(2rem,7vw,5rem); color:white; background-color:#17324d; background-image:linear-gradient(90deg,rgb(23 50 77 / .96),rgb(23 50 77 / .38)),url("/images/home/learning-paths.jpg"); background-size:cover; background-position:center; border:2px solid #8ba3ba; border-radius:1rem; }
.hero a { color:white; text-underline-offset:.25em; }
.eyebrow { font-weight:800; letter-spacing:.1em; }
</style>
</head>
<body>
<section class="hero"><p class="eyebrow">GUIDE PRATIQUE CSS</p><h1>Des fonds superposés, un texte toujours lisible</h1><p>Le message reste dans le HTML ; CSS apporte l’ambiance visuelle.</p><a href="#details">Lire les choix de conception</a></section><p id="details">Retirez l’image de fond et vérifiez que chaque mot reste lisible.</p>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.hero { background: url("hero.jpg"); color: white; }

Voir la correction et son explication

.hero { background-color: #17324d; background-image: linear-gradient(rgb(23 50 77 / .8), rgb(23 50 77 / .8)), url("hero.jpg"); color: white; }

Dans la version initiale, le texte blanc n’a pas de fond fiable si l’image manque ou contient une zone claire. Une couleur de repli et un voile maîtrisé rendent le contraste plus prévisible.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez un encart promotionnel avec deux couches de fond décoratives, une couleur de repli fiable, des coins arrondis et un véritable lien ou bouton HTML pour l’action proposée.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer un bandeau qui reste lisible sans son image — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer un bandeau qui reste lisible sans son image</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer un bandeau qui reste lisible sans son image — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer un bandeau qui reste lisible sans son image</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Tout le texte reste lisible lorsque les images de fond sont désactivées.Le recadrage a été vérifié sur une largeur étroite et une largeur large, sans masquer d’information essentielle.Le focus clavier reste visible et n’est pas coupé par le conteneur arrondi.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Quelle couche d’arrière-plan apparaît au premier plan ?La première image de la listeLa dernière image de la listeLa couleur d’arrière-plan

2. Dans quel cas faut-il généralement utiliser img plutôt qu’une image de fond CSS ?Lorsque l’image apporte un contenu qui nécessite un texte alternatifDès que l’image a des coins arrondisUniquement si le fichier fait moins de 1 Mo

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

Backgrounds, Borders, and Visual Layers

Comprendre l’ordre des couches

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Créer un bandeau qui reste lisible sans son image

Superposer les fonds sans modifier la mise en page

Choisir le recadrage avec cover, contain et la position

Les bordures dessinent des contours, pas le sens du contenu

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris