La propriété background-color permet de changer la couleur de fond d'un élément HTML. Nous allons la découvrir pas à pas, avec des exemples simples et des formats de couleur très courants.
Introduction à la propriété background-color
Quand vous appliquez une couleur de fond, cette couleur se place derrière le contenu de l'élément. C'est très pratique pour faire ressortir un bouton, un bloc de texte, un encadré ou même toute la page.
La syntaxe de base est très simple :
Vous pouvez utiliser directement certains noms de couleurs en anglais, par exemple red, blue, green, black, white, gray, yellow ou encore orange.
<p class="important">
Un texte important
</p>
.important{
background-color: gold;
}
Ici, le texte ne change pas de couleur. Seul le fond devient jaune.
Vous pouvez appliquer background-color à beaucoup d'éléments : une balise p, une div, un titre ou encore le body pour colorer le fond de toute la page.
Attention tout de même : cette liste de noms reste restrictive. Si vous cherchez une couleur plus précise, le format hexadécimal sera souvent plus approprié.
Définir une couleur en hexadécimal
Une couleur hexadécimale commence par un #, puis contient 6 caractères. Chaque paire de caractères correspond à une dose de rouge, de vert puis de bleu.
Au début, il n'est pas nécessaire de tout mémoriser. Retenez surtout qu'une valeur hexadécimale représente une couleur précise.
<div class="carte">
Bloc avec un fond bleu
</div>
.carte{
background-color: #d9f0ff;
padding: 20px;
}
La valeur #d9f0ff donne ici un bleu très clair.
Vous verrez souvent ce format dans les maquettes graphiques ou dans les générateurs de couleurs. Il est très utilisé en CSS.
Condenser certaines couleurs hexadécimales
Dans certains cas, il est possible d'écrire une couleur hexadécimale en version plus courte. C'est possible quand chaque paire contient deux fois le même caractère.
Par exemple, #ffffff peut s'écrire #fff, et #000000 peut s'écrire #000.
Le résultat visuel est exactement le même. C'est simplement une écriture plus compacte.
.bloc_blanc{
background-color: #fff;
}
Ajouter une opacité en hexadécimal
Il est aussi possible d'ajouter une opacité à une couleur hexadécimale. Pour cela, on ajoute deux caractères à la fin des 6 premiers.
On passe donc d'une écriture sur 6 caractères à 8 caractères.
Par exemple, #ff000080 correspond à un rouge avec de la transparence.
.message{
background-color: #ff000080;
}
Attention tout de même : cette écriture est un peu moins facile à lire quand on débute. Si vous trouvez cela plus clair, vous pouvez aussi utiliser rgb() ou hsl() avec gestion de l'opacité dans des fonctions prévues pour ça.
Définir une couleur en RGB
Le format rgb() écrit la couleur avec trois nombres : un pour le rouge, un pour le vert et un pour le bleu. Chaque valeur va de 0 à 255.
Par exemple, si vous augmentez beaucoup la valeur du rouge, votre fond tirera davantage vers le rouge.
<div class="alerte">
Message d'attention
</div>
.alerte{
background-color: rgb(255, 230, 230);
padding: 20px;
}
Le fond contient ici beaucoup de rouge, un peu de vert et un peu de bleu.
Le format rgb() est intéressant quand vous voulez comprendre comment une couleur se compose ou quand un outil vous donne directement ses valeurs numériques.
Ajouter un alpha avec rgba()
Si vous voulez ajouter de la transparence, vous pouvez utiliser un canal alpha. Pendant longtemps, cela s'est fait avec la fonction rgba().
Les trois premières valeurs correspondent toujours au rouge, au vert et au bleu. On ajoute ensuite une quatrième valeur pour l'opacité.
Cette valeur va de 0 à 1 :
-
0rend la couleur totalement transparente, -
1la rend totalement opaque, -
une valeur comme
0.5donne une transparence intermédiaire.
.alerte_legere{
background-color: rgba(255, 0, 0, 0.25);
padding: 20px;
}
Ici, la couleur reste rouge, mais elle laisse davantage voir ce qu'il y a derrière.
Définir une couleur en HSL
On parle parfois de HSI dans certains logiciels, mais en CSS la fonction standard s'appelle hsl(). Elle décrit la couleur avec trois informations :
- la teinte, pour choisir la couleur de base,
- la saturation, pour dire si la couleur est vive ou plus terne,
- la luminosité, pour dire si elle est claire ou foncée.
Ce format est souvent agréable à manipuler quand on veut éclaircir ou assombrir une couleur.
<div class="etiquette">
Une étiquette verte
</div>
.etiquette{
background-color: hsl(120, 60%, 85%);
padding: 20px;
}
Ici, la teinte est verte, avec une couleur plutôt douce et claire.
Ajouter un alpha avec hsla()
Comme pour le RGB, il est possible d'ajouter de la transparence à une couleur HSL grâce à un canal alpha. Pour cela, on utilise la fonction hsla().
On garde d'abord la teinte, la saturation et la luminosité, puis on ajoute une quatrième valeur pour l'opacité.
Là encore, cette valeur va de 0 à 1.
.etiquette_legere{
background-color: hsla(120, 60%, 85%, 0.5);
padding: 20px;
}
Ici, la couleur reste verte, mais elle est moins opaque grâce à l'alpha.
Les valeurs spéciales
En plus des formats de couleur, background-color accepte aussi quelques valeurs spéciales.
transparent
La valeur transparent enlève la couleur de fond. L'élément laisse alors voir ce qu'il y a derrière lui.
.bloc{
background-color: transparent;
}
inherit
La valeur inherit demande à l'élément de reprendre la couleur de fond de son parent. C'est utile quand on veut forcer un comportement d'héritage.
.enfant{
background-color: inherit;
}
initial
La valeur initial remet la propriété à sa valeur de départ. Pour background-color, cela revient à retrouver un fond transparent.
.bloc{
background-color: initial;
}
Attention ! La propriété background-color ne change que la couleur de fond. Si vous voulez ajouter une image, un dégradé ou contrôler leur position, il faudra utiliser d'autres propriétés de fond.
Retenez surtout ceci : pour commencer, background-color et une valeur simple suffisent largement. Vous pourrez ensuite choisir le format de couleur qui vous met le plus à l'aise.