Arrière-plans

En CSS, les propriétés d’arrière-plan (background, en anglais), sont utilisées afin de styliser les éléments HTML. Ce cours détaillera les différentes propriétés CSS d’arrière-plan.

Définir la couleur d’arrière-plan

Pour définir la couleur d'arrière-plan d’un élément HTML, il suffit d’utiliser la propriété background-color. L’exemple ci-dessous montre comment utiliser cette propriété afin de changer la couleur d’arrière-plan d’un titre h1 :

h1 {
    background-color : blue;
}

Cette propriété s’applique à n’importe quel élément HTML, aussi bien une <div>, qu’un <p>, par exemple. Elle s'utilise exactement comme montré dans l’exemple ci-dessus.

L’opacité

Le CSS permet également de changer l’opacité/la transparence de la couleur de fond. Pour ce faire, la propriété opacity est utilisée.

Pour changer l’opacité d’une couleur de fond, il suffit de spécifier une valeur entre 0.0 et 1.0. 0.0 étant une transparence totale et 1.0, une opacité totale.

Exemple :

h1 {
    background-color : blue;
    opacity : 0.5; /* Ici, la couleur sera transparente de 50 % et opaque à 50 % */
}

Remarque :

• Pour la virgule, en CSS, il faut utiliser la notation anglo-saxonne. Ainsi, pour attribuer un chiffre à virgule à une propriété CSS, il suffit de remplacer la virgule par le point.
• Lorsque la propriété opacity est utilisée afin de rendre transparent l’arrière-plan d’un élément, tous les éléments enfants hériteront aussi de cette opacité. Cela peut donc rendre le texte au sein de cet élément si transparent qu’il en deviendrait illisible.

Changer l’image d’arrière-plan