Par défaut, le fond d'une boîte (ie d'un élément) est constitué par la zone d'affichage, les marges internes et les bordures. Les marges externes ne font jamais partie du fond : elles sont toujours transparentes et si elles sont définies, elles laissent apparaître la couleur ou l'image de fond éventuelles de l'élément parent.

Tous les éléments HTML (qu'ils soient de type bloc ou en ligne) peuvent avoir une couleur de fond.

### Définir la couleur de fond

La propriété background-color permet de définir la couleur de fond d'une boîte.

N'importe quelle façon de spécifier une couleur peut être utilisée avec cette propriété.

    body { background-color: #212C19; }
    h2 { background-color: rgb(77, 47, 113); }
    .classe { background-color: rgb(30%, 18%, 44%); }
    #identifiant { background-color: rgba(47, 38, 30, 0.75); }
    div p { background-color: rgba(18%, 14%, 11%, 75%); }
    li:nth-of-type(2n) { background-color: hsl(351, 26%, 23%); }
    p { background-color: hsla(104, 15%, 8%, 0.7); }
    div {background-color: darkred; }

Exemple : couleur de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p>Il y a bien longtemps dans une lointaine galaxie, <span class="stabilo">les Gentils Jedis</span> de la Fédération de l'Empire du Commerce de la République se battent contre <span class="stabilo">les Méchants Gobelins</span> de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien <span class="stabilo">Harry Cover</span> a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une <span class="stabilo">armée de Glandus</span> pour reconquérir le trône de ses parents.</p> </div> </body> </html>
Fichier CSS : styles.css
body { background-color: #000; } #conteneur { width: 400px; margin: 10px auto; color: white; padding: 10px 20px; background-color: rgb(80, 20, 20); } p { background-color: grey; margin: 20px 0; padding: 10px; border: 10px dashed; /* le style de la bordure montre bien que la couleur de fond s'arrête après la bordure, à la marge extérieure */ } .stabilo { background-color: rgb(255, 239, 128); color: grey; padding: 0 2px; }

#### Figure RVB

Complétez le code HTML et CSS pour obtenir le résultat suivant :

figure à réaliser

Les cercles ont un rayon de 50 pixels. La couleur de fond est une des trois couleurs primaires (rouge, vert, bleu) avec une transparence de 50%.

Une fois la figure obtenue, elle doit être placée au milieu de la page (et rester au milieu quand la page est redimensionnée).

Code à compléter

Exercice : figure RVB
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> </body> </html>
Fichier CSS : styles.css
CODE CSS A COMPLETER

Une solution possible

Exercice : figure RVB
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <figure> <div id="red"></div> <div id="green"></div> <div id="blue"></div> </figure> </body> </html>
Fichier CSS : styles.css
body { background-color: #FFF; } figure { position: absolute; width: 150px; height: 150px; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } div { width: 100px; height: 100px; border-radius: 50%; position: absolute; } #red { top: 0; left: 25px; background: rgba(255, 0, 0, 0.5); } #green { top: 50px; left: 0; background: rgba(0, 255, 0, 0.5); } #blue { top: 50px; left: 50px; background: rgba(0, 0, 255, 0.5); }

### Définir la zone de fond

Par défaut, la couleur de fond s'applique sur la zone de contenu, les marges internes et sous les bordures. Toutefois, la propriété background-clip permet de rédéfinir la zone ou s'applique la couleur (ou l'image) de fond. Cette propriété peut avoir 3 valeurs :

- `content-box` : la couleur de fond s'applique uniquement sur la zone de contenu,
- `padding-box` : la couleur de fond s'applique sur la zone de contenu et les marges internes,
- `border-box` (par défaut) : la couleur de fond s'applique sur la zone de contenu, les marges internes et les bordures.

content-box | padding-box | border-box

Exemple : zone de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </div> </body> </html>
Fichier CSS : styles.css
body { background-color: #000; } #conteneur { width: 400px; margin: 10px auto; color: white; padding: 10px 20px; background-color: rgb(80, 20, 20); } p { background-color: grey; margin: 20px 0; padding: 10px; border: 10px dashed; } p:first-of-type { background-clip: content-box; } p:nth-of-type(2) { background-clip: padding-box; } p:last-of-type { background-clip: border-box; }