CSS : background-color - Web Formation

Description

La propriété background-color permet de définir la couleur de fond d’un élément HTML.

Elle s’applique à presque tous les éléments (paragraphes, titres, blocs, boutons…) et remplit l’arrière-plan de la boîte de l’élément selon son modèle de boîte, ce qui correspond à la zone à l’intérieur des bordures.

Valeurs possibles

Voici des exemples de valeurs possibles.

Valeur	Exemple	Description
Nom de couleur	`red`, `blue`, `gold`	Noms prédéfinis par CSS — simple mais limité.
Hexadécimal	`#3498db`, `#fff`, `#000000`	Format le plus courant : 3 ou 6 chiffres (parfois 8 avec alpha/opacité).
RGB / RGBA	`rgb(52, 152, 219)` `rgba(10%, 25%, 15%, 0.5)`	Précis et pratique pour la transparence (`a` = alpha/opacité).
transparent	`transparent`	Définit un fond totalement transparent.

Exemples

Démonstration interactive : background-color

Choisissez une valeur

Aperçu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tortor id tortor malesuada dictum vitae et velit. Etiam in nulla massa. Nullam imperdiet tellus quis commodo fermentum.

Code HTML & CSS

<p class="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tortor id tortor malesuada dictum vitae et velit. Etiam in nulla massa. Nullam imperdiet tellus quis commodo fermentum.</p>

<p class="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tortor id tortor malesuada dictum vitae et velit. Etiam in nulla massa. Nullam imperdiet tellus quis commodo fermentum.</p>

.demo {
    background-color: gold;
}

.demo {    background-color: gold;}

.demo {
    background-color: #3498db;
}

.demo {    background-color: #3498db;}

.demo {
    background-color: rgb(210, 30, 42);
}

.demo {    background-color: rgb(210, 30, 42);}