Sommaire du billet

• Explication du contexte
• D'où le problème !
• Et voilà ! C'est tout ?
• Aller directement au formulaire de la solution

Explication du contexte

Lorsque l'on lit la spécification du W3C (World Wide Web Consortium) à propos du positionnement des images d'arrière-plan (Spécification originale en anglais), on découvre que la valeur "0%" place en toute logique l'image à gauche, que la valeur "100%" place plus étonnamment l'image à droite (Bord droit de l'image contre bord droit de l'élément), et que "50%" la centre parfaitement.

Le mécanisme est le suivant : Lorsque l'on indique un pourcentage "x" le navigateur va calculer la position du point qui se trouve à x% du bord gauche de l'élément, puis la position du point qui se trouve à x% du bord gauche de notre image d'arrière plan et ensuite faire coïncider les deux. Trêves de discours obscur, prenons un exemple.

Dans le thème "Bougainvillier" de ce blog, nous avons voulu placer une image d'ombre à coté de la colonne principale qui se trouve à 5% du bord gauche.

Figure 1 : L'image de l'effet d'ombre seule.

Figure 2 : L'image répétée verticalement sur fond gris qui donnera l'effet final.

Nous voulons que le bord droit de notre image soit tout contre cette colonne principale. Le premier réflexe est de définir la position horizontale de l'image à 5%. Voici ce que cela donne, sur fond blanc pour plus de visibilité :

Figure 3 : L'image est répétée verticalement sur fond blanc et positionnée à 5%.

Firgue 4 : Détail de la vue précédente.

Dans cet exemple, le bord droit de notre image d'ombre n'est pas positionné à 5% du bord de la page comme nous le voulions. En réalité, c'est le point situé à 5% du bord gauche de notre image qui est positionné à 5% du bord gauche de la page.

Retour au sommaire

D'où le problème !

Comment alors aligner ce foutu bord droit de l'image avec ce maudit point à 5% du bord gauche de la page ?

La solution existe, mais malheureusement, elle s'appuie sur la modification de l'image, ce qui la rend un peu pénible à mettre en œuvre. Il faut que le point de l'image que l'on souhaite aligner à x%, soit positionné à x% dans l'image elle même. Dans notre cas, le bord droit de l'ombre doit être à 5% de la totalité de la largeur de l'image. Démonstration :

Figure 5 : Image originale.

L'image originale faisait 90 pixels de large. On veut que ce point à 90 pixels soit à 5% du bord gauche de l'image modifiée. Exprimé simplement, il faut 20 fois 5% pour faire 100%, donc il faut 20 fois 90 pixels pour obtenir la nouvelle largeur : 1800 pixels.

Figure 6 : Image modifiée. (Coupée à 400 pixels car trop large pour être affichée).

Avec ces nouvelles dimensions, le positionnement à 5% va aligner notre point de référence dans l'image avec le point à 5% du bord gauche de la page. La règle CSS pour cet arrière plan est la suivante :
background: url("fig6.png") repeat-y 5% 0;

Figure 7 : Résultat. On voit que l'image est placée la où on le souhaite et que l'étirement de la fenêtre garde l'alignement de l'ombre avec le bloc de contenu.

Retour au sommaire

Et voilà ! C'est tout ?

Mais ça pèse super lourd une si grande image direz-vous inquiet !

Dans notre cas pas du tout. Toute la partie à droite de notre point de référence est transparente. Pour notre image, que ce soit en formats GIF ou PNG, le poids ne dépasse pas les 500 octets (Pas kilo octets !). Bon, évidement, certains paramètres sont très pénalisants. Par exemple, la même image en format JPG (Donc sans transparence) pèsera déjà 1,6 kilo octets. De même si vous augmentez la hauteur de l'image pour l'enregistrer finalement en format JPG, le résultat n'est pas garantit.

Je n'ai rien compris au calcul, c'est vraiment compliqué !

C'est vrai, ce n'est pas trivial. Ça ne l'a pas été pour nous non plus. Du coup, petit coup de pouce maison, nous avons créé un humble formulaire en HTML / JavaScript pour alléger cette tâche fastidieuse.