Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
2 juillet 2008 3 02 /07 /juillet /2008 17:27

détail du 'Dragon' de Max Escher

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 :

  1. il y aurait donc deux façons de dire une même chose ? Surprenant.
  2. 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 :

  1. avec des mots-clés : left, right ou center pour le placement horizontal, top, bottom ou center (encore) pour le placement vertical.
  2. 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.
  3. 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 !

commentaires

aurore 27/08/2008 14:58

bonjour, je n'ai de cesse à rechercher un code htlm pour pouvoir mettre mon image de fond background en menu déroulant dans la feuille du Css, mais je ne trouve aucun résultat cela ne dépend pas de l'attachment ni de la position j'ai tout essayé, rien à faire. Je souhaiterai que mon image défile de bas en haut en continue mais je n'arrive pas à trouver l'indice.

je vous joins mon mail si vous avez une petite idée
Merci d'avance de votre aide

Aïe mes doigts ! 28/08/2008 11:48


Ai-je bien compris ce que vous souhaitez : que l'image de fond bouge d'elle-même, sans intervention de l'utilisateur ? Pas possible en CSS, il faut vous farcir du JavaScript.
Ou alors mettre cette image en image ordinaire , l'inclure dans un "marquee" pour le défilement et vous lancer dans un travail complexe de superposition (par le CSS) pour que ce à quoi
elle devait servir d'image de fond vienne se placer par dessus.
Dans tous les cas c'est, au minimum, délicat...
Autre possibilité si l'image n'est pas trop étendue : en faire un Gif animé, il y a un peu partout (Google !) des logiciels d'assemblage d'images. Envisageable pour animer un fond de module, exclu
pour l'image de fond du blog : le fichier gif serait gargantuesque.
Euh... vous y tenez beaucoup, à cet effet ?


Anna 03/07/2008 22:35

Le coup de la fenêtre "à travers" laquelle on voit la bibliothèque, c'est TROP fort.
(oui, je sais, pas très technique, comme réponse. Le côté technique est intéressant aussi, mais l'application est impressionnante ! )

Aïe mes doigts ! 03/07/2008 23:21


Merci m'dame :-)
Le beau de l'histoire, c'est que c'est vraiment très simple à obtenir : juste donner le même fond fixe au body et au petit div qui sert de "lucarne". En somme, j'ai fait un feuilleté : de bas en
haut tu trouves:
body, fond fixe (les livres)
article, fond uni (blanc cassé)
div dans l'article, fond fixe (les livres)

Et si j'avais utilisé pour le div une version légèrement plus sombre des livres, on aurait cru à une vitre fumée... (ce que je fais pour les bandeaux et les modules)
Effet maximum pour effort minimum, j'aime !


Archives