[CSS] Questions de fond - 1 : théorie

02.07.2008

L'un des premiers embellissements apportés à un blog est souvent de mettre des images de fond. On peut s'en tirer en glanant des réponses à gauche à droite, réponses où il est question de background ou de background-color ou encore de background-image sans qu'on y voie très clair dans les nuances. Or il y en a, elles sont simples et, bien comprises et combinées à d'autres finesses, permettent bien des choses.

Voici donc un petit article pour tenter de s'y retrouver, accompagné d'une démonstration pour se clarifier les idées. Le suivant donnera quelques suggestions concrètes.

L'exposé complet se trouve dans le chapitre 14 de la spécification CSS2.

Prologue : background pour débutants

Supposons qu'on s'intéresse au motif d'arrière-plan des articles.

Pour le peindre en jaune, on peut rajouter dans le CSS .article {background-color:yellow} ou, plus court, .article {background:yellow}.

Pour utiliser une image, on écrira .article {background-image: url(http://[...]/monimage.jpg} ou, plus court, .article {background: url(http://[...]/monimage.jpg}

Ça marche sans histoires, mais on peut déjà se poser des questions :

il y aurait donc deux façons de dire une même chose ? Surprenant.
une même propriété peut accepter des valeurs de natures différentes ? Parce qu'un code de couleur et une URL, ce n'est tout de même pas pareil.

Tirons tout ceci au clair une bonne fois.

Les détails d'un arrière-plan

Il existe cinq propriétés pour caractériser un arrière-plan :

background-color: Facile : un code de couleur ou bien transparent, qui est la valeur par défaut.
background-image: Facile aussi : l'URL d'une image ou bien none, qui est la valeur par défaut. Dans ce cas (pas d'image) les trois propriétés qui suivent n'ont aucun effet.
background-repeat: Indique si l'image est répétée ou non pour garnir tout le fond (par défaut elle l'est).
background-attachment: Indique si l'image se déplace lorsqu'on scrolle la fenêtre (scroll qui est la valeur par défaut) ou reste fixe fixed comme le mur de livres de ce blog.
background-position: Permet de caler le motif de fond par rapport à la zone que l'on décore. Par défaut, c'est en haut à gauche. Nous regarderons cette propriété au calme, plus loin dans l'article.

Il faut aussi savoir que l'arrière-plan (qu'il soit une couleur unie ou une image) ne déborde jamais de la bordure de la zone. Pour le dire autrement : les marges sont toujours transparentes.

La propriété background

Ce n'est pas une simple abréviation qui, par une magie obscure, désignerait tantôt une image et tantôt une couleur. C'est une propriété raccourcie qui définit en une seule fois les cinq précédentes, dans l'ordre :

 background = bgcolor - bgURL - bgrepeat - bgattachment - bgposition

… et les valeurs qu'on ne mentionne pas prennent leur valeur par défaut. Autrement dit :

 {background : url(...) }

… se lit en réalité

 {background : transparent url(...) repeat scroll 0 0}

… qui lui-même se décomposerait en

 {background-color:transparent ; background-image:url(...); background-repeat:repeat; [etc.] }

Autrement dit toujours, vous écrivez non pas une seule règle mais cinq d'un coup même si vous ne donnez pas cinq renseignements.

Conséquence : définir background après avoir défini d'autres détails du fond ne complète pas ces détails mais les écrase , les redéfinit. Voyons une conséquence pratique.

background et background-xyz : un piège classique

Mettons un .gif, avec des transparences, en fond d'article :

 .article {background-image:url(http://......zoziau.gif)}

… et, à tant faire, plaçons ce motif au centre :

 .article {background-image:url(http://......zoziau.gif); background-position:center}

Comme, par défaut, l'image est répétée, l'effet produit sera un semis régulier d'oiseaux dont un se trouvera au centre. Jusqu'ici tout va bien. Pour que les zoziaux se détachent sur un aplat jaune, rajoutons :

 .article {background-image:url(http://......zoziau.gif); background-position:center; background:yellow}

… et pouf ! plus d'oiseaux. Explication : la dernière règle a certes spécifié une couleur jaune mais elle a aussi, en douce, remis tout le reste à sa valeur par défaut – or, par défaut, il n'y a pas d'image…

Version correcte :

 .article {background-image:url(http://......zoziau.gif); background-position:center; background-color:yellow}

… ou encore, avec la propriété raccourcie :

 .article {background: yellow url(http://......zoziau.gif) repeat scroll center;}

Une précaution

Vous avez noté que j'ai pris la peine de préciser repeat et scroll dans le dernier échantillon alors que ce sont des valeurs par défaut, qu'il serait donc inutile d'indiquer :

 .article {background: yellow url(http://......zoziau.gif) center;}

Très juste, et certains navigateurs se débrouillent très bien pour comprendre que center ne peut être qu'une position. Mais pour d'autres seule semble compter la place des mots dans la séquence – ils ont tort mais c'est comme ça. Pour ceux-là center est la valeur de background-repeat, ce qui ne signifie rien.

Conclusion : en utilisant la propriété background, respectez l'ordre couleur - URL - répétition - mobilité - position et n'omettez au besoin que les derniers termes : ne laissez pas de trou dans la suite des cinq valeurs.

Mosaïque ou motif isolé ? background-repeat

La valeur par défaut est la mosaïque {background-repeat: repeat} : l'image se répète dans les deux directions, comme le fait le mur de livres en fond de mon blog. Ce mur est formé d'une seule image de 600 pixels de large sur 382, retouchée pour que les bords opposés se raccordent sans couture.

On peut aussi préciser repeat-x ou repeat-y pour que l'image ne se répète que dans une seule direction, ce qui produira une bande horizontale ou verticale, ou no-repeat pour qu'elle ne se répète pas du tout (= un seul exemplaire du motif).

Un fond fixe – background-attachment:fixed

Si vous utilisez encore Internet Explorer version 6 (ou antérieure), cette section ne vous servira à rien, désolé. Utilisateurs d'IE7, restez donc !

L'idée est limpide : avec background-attachment : scroll (valeur par défaut) le fond bouge avec la zone si on fait défiler la fenêtre, avec background-attachment : fixed il reste fixe par rapport à la fenêtre.

Exemples simples ici : le mur de livres est évidemment fixe alors que les petits boutons du calendrier sont mobiles et accompagnent le calendrier dans ses déplacements (c'est heureux !)

Détail important : quand l'image de fond est fixe, son calage background-position se fait par rapport à la fenêtre et non par rapport à la zone.


Fond mobile (cas usuel)	Fond fixe

Placer l'image de fond – background-position

Là, c'est un peu plus subtil.

Il s'agit de placer les bords de l'image par rapport aux bords de la zone à laquelle elle sert de fond. Très exactement, par rapport aux bords intérieurs de la bordure de cette zone : la largeur des marges et celle des bordures ne changent rien.

Si l'image est répétée, elle le sera à partir d'un exemplaire placé conformément à background-position

Ce placement se représente par une paire de valeurs : abscisse et ordonnée, ou encore horizontale et verticale. Il existe plusieurs manières d'écrire ces valeurs :

avec des mots-clés : left, right ou center pour le placement horizontal, top, bottom ou center (encore) pour le placement vertical.
avec des longueurs, positives ou négatives, exprimées en px, em ou toute autre unité. La première valeur indique la distance horizontale entre le bord gauche de la zone et celui de l'image, la deuxième valeur indique la distance entre celui du haut de la zone et celui du haut de l'image.
avec des pourcentages, positifs ou négatifs. Ce système n'est pas équivalent à celui des longueurs.
Un exemplebackground-position:20% 30% signifie que la verticale située à 20% de la largeur de l'image se placera sur la verticale située à 20% de la largeur de la zone et que, de même, l'horizontale située à 30% de la hauteur de l'image se placera sur l'horizontale située à 30% de la hauteur de la zone.
Autre exemple classique : avec background-position:50% 0, l'image sera en haut de la zone et centrée sur l'axe vertical.

Contraintes et valeurs par défaut :

on ne panache pas les mots-clés et les valeurs numériques (ce sera bientôt possible, mais quelle importance ?)
si vous avez tout de même besoin de le faire, remarquez que left et top équivalent chacun à 0%, que right et bottom équivalent chacun à 100% et que center équivaut à 50%.
on peut panacher les longueurs et les pourcentages
la valeur par défaut de background-position est left top.
si on ne mentionne qu'une seule valeur, l'autre est prise égale à 50% ou center (c'est pareil).
si on ne mentionne qu'une seule valeur (bis) et qu'on n'utilise pas de mots-clés, cette valeur est donc forcément le décalage horizontal. Le décalage vertical est alors de 50% (center).
dans le cas des mots-clés, et comme ils ne sont pas ambigüs, on peut les écrire dans l'ordre qu'on veut : top left ou left top, aucune confusion possible.

Ouf ! Fin de la théorie.

Travaux pratiques

Vous y verrez plus clair, je le souhaite, en jouant avec cette démonstration soigneusement mitonnée.

Le prochain article passera aux actes !