Jus de méninges

10 mai 2013 5 10 /05 /mai /2013 00:33

[CSS] Marges courbes : Back to basics

Je ne prétends pas vous apprendre qu'on peut utiliser une photo comme image de fond (background-image) d'autre chose, mais il peut être utile de réviser deux ou trois trucs.

Images

Primo, une image img fait partie du texte de la page HTML, c'est un élément parmi d'autres, tout comme un span ou un div. Vous n'êtes pas obligé de préciser les dimensions de cet élément :
<img src="http://gnagnagna/PoireMini.png" /> marche très bien MAIS. Mais, tant que l'image n'est pas chargée dans le navigateur, celui-ci réserve à cet élément un espace de 0x0 pixels. L'élément ne prendra ses dimensions définitives (120x150 pixels dans notre exemple) qu'au chargement de l'image. Ceci veut dire que le texte de la page, d'abord arrangé dans l'idée de 0x0 pixels, va se réarranger dans tous les sens, sautiller, à l'arrivée de l'image. Le plus souvent c'est indésirable, donc mieux vaut déclarer les dimensions réelles de l'image dans le source HTML :
<img width="120" height="150" src="http://gnagnagna/PoireMini.png" />

Deuxio et cela dit, il y a des possibilités commodes. En n'indiquant qu'une seule dimension, l'autre sera ajustée pour respecter les proportions de l'image. Ici
<img width="60" src="http://gnagnagna/PoireMini.png" /> produit l'image réduite de moitié que vous voyez à gauche.

Si les dimensions indiquées ne respectent pas les proportions de l'image, celle-ci sera déformée en conséquence. La poire tassée au tiers de sa hauteur résulte de
<img width="120" height="50" src="http://gnagnagna/PoireMini.png" />.

Note au passage : ici l' erreur sur les dimensions est délibérée et son résultat spectaculaire. Très souvent on ne se trompe que d'un pixel ou deux ; la photo alors ne sera pas scandaleusement distordue mais très dégradée – parce que le navigateur se sera chargé de la mettre aux dimensions voulues, et que pour cela il utilise un algorithme rapide plutôt qu'un algorithme de qualité. C'est un classique des râleries sur les forums d'OB, c'est aussi un inconvénient supplémentaire de la méthode de l'article précédent : elle se joue en effet au pixel près, et on n'y manie pas des valeurs rondes.

Voilà ce que je voulais dire des images "vraies". Parlons maintenant des fonds.

Fonds

Un p'tit div.

Ce div n'a rien de bien spécial. Il mesure 80x50 pixels, voici son code source :

 <div style="width:80px;height:50px;color:white;background-color:#999"> Un p'tit div. </div>

Un p'tit div.

On y ajoute une image de fond :

 <div style="width:80px;height:50px;color:white;background-color:#999; background-image:url(http://gnagnagna/PoireMini.png)"> Un p'tit div. </div>

On remarque d'abord que les dimensions de l'image de fond n'ont aucune influence sur celle du div. On remarque aussi que l'image de fond n'est pas redimensionnée pour s'adapter au div : ni agrandie, ni réduite, ni déformée, elle est bonnement rognée aux limites du div. Si le div était plus grand que l'image dans un sens ou l'autre, celle-ci serait répétée pour tapisser le fond du div. On peut commander cette répétition (propriété background-repeat), je n'en parlerai pas ici.

Je ne sais pas si vous voyez ce que je veux dire ? Ici le motif de fond se répète horizontalement tous les 120 pixels, largeur de l'image de fond. Celle-ci s'orne, pour l'occasion, d'un hideux trait rouge vertical accompagné de la mention "50px", longueur de ce trait, qui prépare la suite des événements.

Vous avez sûrement observé que l'image de fond est calée le plus simplement possible par rapport au div (ou au paragraphe ou… ) dont elle tapisse le fond : en haut à gauche. Plus rigoureusement dit : le coin supérieur gauche de l'image de fond coïncide avec le coin supérieur gauche de l'élément tapissé. Une possibilité très intéressante des images de fond est qu'on peut les décaler par rapport à ce qu'elles tapissent, c'est la propriété background-position, qui indique le décalage du coin supérieur gauche de l'image par rapport à celui de l'élément tapissé. Sa valeur par défaut est donc 0 0 (aucun décalage ni en abscisse X ni en ordonnée Y) puisque les deux coins coïncident (coincoin ? oh pardon).

Mais si, comme sur le présent paragraphe, on indique background-position:0 -50px;, c'est-à-dire un décalage de 0px à l'horizontale et de -50px à la verticale (50 pixels vers le haut), l'image de fond remonte de 50 pixels.

Faisons encore mumuse : background-position:30px -50px; décale l'image de fond de 30 pixels vers la droite et, comme précédemment, de 50 pixels vers le haut.

Vos rétines vont encore bien ? Je ne vous ai pas tout dit sur les images de fond, je suis plus prolixe là. Il n'y a ici que ce qui va nous servir à placer notre poire en lanières sur le côté gauche ou droit du texte. Aaaahhh, tout de même !

Fausse bonne idée Vraie bonne idée Début