Spécifications CSS

14 Les couleurs et les arrière-plans

Contenu

14.1 La couleur d'avant-plan : la propriété 'color'
14.2 L'arrière-plan
- 14.2.1 Les propriétés d'arrière-plan : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' et 'background'
14.3 La correction du gamma

Les propriétés CSS permettent aux auteurs la spécification d'une couleur d'avant-plan et d'arrière-plan pour un élément. Pour l'arrière-plan, cela peut être une couleur ou une image. Les propriétés d'arrière-plan autorisent le positionnement et la répétition d'une image de fond, si celle-ci doit rester fixe, par rapport à la zone de visualisation, ou bien, si elle doit défiler en même temps que le document.

Voir le passage sur les unités de couleur pour une syntaxe correcte des valeurs de couleur.

14.1 La couleur d'avant-plan : la propriété 'color'

'color'

Valeur :	<couleur> \| inherit
Initiale :	selon l'agent utilisateur
S'applique à :	tous les éléments
Héritée :	oui
Pourcentage :	sans objet
Médias :	visuel

Cette propriété décrit la couleur d'avant-plan du contenu de texte d'un élément. Voici plusieurs façons d'indiquer la couleur rouge :

EM { color: red }              /* nom de couleur prédéfini */
EM { color: rgb(255,0,0) }     /* couleurs en RGB allant de 0 à 255 */

14.2 L'arrière-plan

Les auteurs peuvent spécifier l'arrière-plan d'un élément (c.à.d. la surface où celui est rendu) comme étant une couleur ou bien une image. Selon le modèle de la boîte, l'arrière-plan correspond aux aires de contenu et, d'espacement et de bordure. Les couleurs et styles de bordure sont spécifiées par les propriétés de bordure. Les marges étant transparentes, l'arrière-plan du parent est toujours visible au travers de celles-ci.

Bien que les propriétés d'arrière-plan ne s'héritent pas, l'arrière-plan de la boîte du parent transparaîtra par défaut, du fait de la valeur initiale 'transparent' de la propriété 'background-color'.

L'arrière-plan de la boîte générée par l'élément racine recouvre la totalité du canevas.

Dans le cas de documents HTML, on recommande aux auteurs de spécifier un arrière-plan à l'élément BODY, plutôt qu'à l'élément HTML. Les agents utilisateurs devraient suivre les règles de préséance suivantes pour remplir le fond du canevas : quand la valeur de la propriété 'background' pour l'élément HTML diffère de 'transparent', alors utiliser la valeur spécifiée, autrement utiliser celle spécifiée par la propriété 'background' de l'élément BODY. Le rendu n'est pas défini si la valeur finale reste 'transparent'.

Selon ces règles, le canevas en dessous du document HTML suivant aura un arrière-plan "marbré" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Donner un arrière-plan au canevas</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marbre.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Mon arrière-plan est marbré.
  </BODY>
</HTML>

14.2.1 Les propriétés d'arrière-plan : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' et 'background'

'background-color'

Valeur :	<couleur> \| transparent \| inherit
Initiale:	transparent
S'applique à :	tous les éléments
Héritée :	non
Pourcentage :	sans objet
Médias :	visuel

Cette propriété donne la couleur d'arrière-plan d'un élément, avec une valeur de <couleur>, ou bien avec le mot-clé 'transparent', celui-ci laissant éventuellement voir les couleurs situées plus en-dessous.

H1 { background-color: #F00 }

'background-image'

Valeur :	<uri> \| none \| inherit
Initiale :	none
S'applique à :	tous les éléments
Héritée :	non
Pourcentage :	sans objet
Médias :	visuel

Cette propriété spécifie l'image d'arrière-plan d'un élément. En même temps qu'une image, les auteurs devraient aussi spécifier une couleur d'arrière-plan, cette couleur étant employée en remplacement d'une image indisponible. Celle-ci, une fois disponible, vient se superposer sur le fond coloré. La couleur du fond étant ainsi visible au travers des zones transparentes de l'image.

La propriété admet les valeurs d'<uri>, pointant vers une image, ou 'none', prohibant l'emploi d'image.

BODY { background-image: url("marble.gif") }
P { background-image: none }

'background-repeat'

Valeur :	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit
Initiale :	repeat
S'applique à :	tous les éléments
Héritée :	non
Pourcentage :	sans objet
Médias :	visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est répétée (apposée) et la manière de la répétition. La mosaïque de fond résultante correspond aux aires de contenu et, d'espacement et de bordure de la boîte de l'élément en question. Les significations des valeurs sont :

repeat: L'image se répète à la fois horizontalement et verticalement ;
repeat-x: L'image ne se répète qu'horizontalement ;
repeat-y: L'image ne se répète que verticalement ;
no-repeat: L'image ne se répète pas : un seul exemplaire de celle-ci est dessiné.

BODY { 
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

Une image de fond centrée, des copies de celle-ci se répétant en haut et en bas des aires d'espacement et de contenu. [D]

Un exemplaire de l'image d'arrière-plan est placé au centre, puis d'autres exemplaires de celles-ci se placent les unes au-dessus, les autres en-dessous, produisant une bande verticale derrière l'élément.

'background-attachment'

Valeur :	scroll \| fixed \| inherit
Initiale :	scroll
S'applique à :	tous les éléments
Héritée :	non
Pourcentage :	sans objet
Médias :	visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est fixe par rapport à la zone de visualisation (pour la valeur 'fixed'), ou si celle-ci défile en même temps que le document (pour la valeur 'scroll'). Noter qu'il n'existe qu'une seule zone de visualisation par document ; c.à.d., même si l'élément est doté d'un mécanisme de défilement (voir la propriété 'overflow'), un arrière-plan avec la valeur 'fixed' ne se déplace pas avec cet élément.

Même si l'image est fixe, celle-ci n'est visible que quand elle se trouve dans les aires d'arrière-plan ou, d'espacement ou de bordure de l'élément. À moins que l'image ne se répète en mosaïque ('background-repeat: repeat'), celle-ci peut ainsi ne pas apparaître.

Dans cet exemple, une bande verticale infinie reste "collée" dans la zone de visualisation quand l'élément défile :

BODY { 
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Les agents utilisateurs peuvent considérer une valeur 'fixed' comme étant 'scroll'. Cependant, on recommande une interprétation correcte de la valeur 'fixed', au moins pour les éléments HTML et BODY, autrement il serait impossible pour un auteur de fournir une image destinée seulement aux navigateurs reconnaissant la valeur 'fixed'. Voir le passage sur la conformité pour des explications.

'background-position'

Valeur :	[ [<pourcentage > \| <longueur> ]{1,2} \| [ [top \| center \| bottom] \|\| [left \| center \| right] ] ] \| inherit
Initiale :	0% 0%
S'applique à :	ceux des éléments de type bloc et ceux remplacés
Héritée :	non
Pourcentage :	se rapporte à la taille de la boîte elle-même
Médias :	visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique la position initiale de celle-ci. Les significations des valeurs sont :

<pourcentage> <pourcentage>: Pour la paire de valeurs '0% 0%', le coin en haut et à gauche de l'image est aligné sur celui du bord de l'espacement de la boîte. Pour la paire de valeurs '100% 100%', c'est le coin en bas et à droite de l'image sur celui du bord de l'espacement de la boîte. Pour la paire de valeurs '14% 84%', le point dans l'image, situé 14 % vers la droite et 84 % vers le bas, se place sur celui contenu dans l'aire d'espacement de la boîte, dans les mêmes proportions ;
<longueur> <longueur>: Pour la paire de valeur '2cm 2cm', le coin en haut et à gauche de l'image se place sur le point, situé à 2 cm vers la droite et 2 cm vers le bas en partant du coin en haut et à gauche de l'aire d'espacement de la boîte ;

top left et left top: Identique à '0% 0%' ;
top, top center et center top: Identique à '50% 0%';
right top et top right: Identique à '100% 0%' ;
left, left center et center left: Identique à '0% 50%' ;
center et center center: Identique à '50% 50%' ;
right, right center et center right: Identique à '100% 50%' ;
bottom left et left bottom: Identique à '0% 100%' ;
bottom, bottom center et center bottom: Identique à '50% 100%' ;
bottom right et right bottom: Identique à '100% 100%'.

Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celle-ci ne concerne que la position horizontale, la position verticale sera 50%. Quand on donne deux valeurs, la première concerne la position horizontale. Les combinaisons de valeurs de pourcentage et de longueur sont admises (ex. '50% 2cm'). Les positions négatives le sont également. On ne peut pas combiner des mots-clés avec des valeurs de pourcentage ou de longueur (ce qui est possible est indiqué plus haut).

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

Quand l'image d'arrière-plan est fixe par rapport à la zone de visualisation (voir la propriété 'background-attachment'), cette image se place relativement à celui-ci, et non par rapport à l'aire d'espacement de l'élément. Par exemple :

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

Ici, l'image (solitaire) est placée dans le coin en bas à droite de la zone de visualisation.

'background'

Valeur :	[<'background-color'> \|\| <'background-image'> \|\| <'background-repeat'> \|\| <'background-attachment'> \|\| <'background-position'>] \| inherit
Initiale :	non définie pour les propriétés raccourcies
S'applique à :	tous les éléments
Héritée :	non
Pourcentage :	admis pour la propriété 'background-position'
Médias :	visuel

La propriété 'background' est une propriété raccourcie qui sert à regrouper les propriétés individuelles 'background-color', 'background-image', 'background-repeat', 'background-attachment' et 'background-position' dans la feuille de style.

La propriété 'background' distribue d'abord à toutes les propriétés individuelles d'arrière-plan à leur valeur initiale, puis leur applique les valeurs explicites de la déclaration.

Dans la première règle de l'exemple suivant, la valeur de la propriété 'background-color' est seule spécifiée, les autres propriétés individuelles recevant leur valeur initiale. Dans la seconde règle, toutes les valeurs des propriétés individuelles sont spécifiées :

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 La correction du gamma

Pour des explications concernant les questions soulevées par le gamma, consulter le tutoriel contenu dans la spécification PNG ([PNG10]).

Lors du calcul pour la correction du gamma, les agents utilisateurs, ceux affichant sur un écran cathodique, peuvent considérer un écran cathodique idéal et ignorer les effets du gamma apparent dus au dithering. Ceci implique, de leur part et selon les plates-formes actuelles, les corrections minimales suivantes :

PC sous MS-Windows: aucune ;
Unix sous X11: aucune ;
Macintosh sous QuickDraw: appliquer un gamma de 1.45 [ICC32] (celles des applications compatibles peuvent simplement passer le profil ICC sRGB à ColorSync pour effectuer la correction de couleur appropriée) ;
SGI sous X: appliquer la valeur de gamma trouvée à /etc/config/system.glGammaVal (la valeur par défaut étant 1.70 ; les applications tournant sur Irix 6.2, ou une version supérieure, peuvent simplement passer le profil ICC sRGB au système de gestion de couleur) ;
NeXT sous NeXTStep: appliquer un gamma de 2.22.

L'expression "appliquer un gamma" signifie que chacune des valeurs R, G et B doit être convertie en R'=R^gamma, G'=G^gamma et B'=B^gamma, avant leur transmission au système d'exploitation.

Ceci peut se faire très rapidement en construisant une table de référence de 256 valeurs, une seule fois au lancement du navigateur, ainsi :

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

ce qui évite des calculs compliqués pour chaque attribut de couleur et autrement faramineux au niveau de chaque pixel.

Version en cache

04/12/2024 20:16:17 Cette version de la page est en cache (à la date du 04/12/2024 20:16:17) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 12/08/2006, dernière modification le 26/10/2018
Source du document imprimé : https://www.gaudry.be/css-rf-/css-rf-colors.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes

↑ W3C : World Wide Web consortium
↑ Avertissement Légal : Bien que repectant de trè près le document original, cette traduction n'est pas une version française agréée par le W3C

Table des matières Haut

Références

Spécifications CSS : http://www.yoyodesign.org, Les couleurs et les arrière-pla

Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.

Table des matières Haut