Peut-on adapter une image de fond à la taille d'un paragraphe ?

Bonjour,
Je suis grand débutant en CSS et je vais essayer de me faire comprendre...

Je suis confronté à un "problème" que j'imagine tout simple (a priori !).

J'ai voulu formater les paragraphes d'un site en utilisant les CSS (avec l'éditeur de CSS de Kompozer). J'y suis parvenu sauf que le background ne s'adapte pas à la taille du paragraphe dans le sens de la hauteur. En fait, le texte dépasse de l'image de fond dont la taille ne varie pas.

J'aimerais donc savoir s'il est possible de rendre "fluctuante" mon image de fond pour l'adapter à la taille du paragraphe (sans faire d'effet mosaïque).

Si oui quel attribut (?) CSS dois-je utiliser ?

Merci d'avance.

JPV56

Bonjour et bienvenue,

tu ne peux pas déformer une image de fond comme on peut le faire avec une image présente dans le code HTML.
Il faut donc que tu prévoies le cas où le texte sera plus grand que la normale (quand un visiteur agrandit la taille du texte par exemple avec IE6/IE7 ou Firefox 2 par exemple, sans utiliser le zoom d'IE7 ou Firefox 3) en ayant des blocs extensibles en hauteur (en général).

1/ Une couleur de fond apparaissant là où il n'y a pas ton image ferait-elle l'affaire ? Si oui parfait c'est le plus simple.

2/ Si ton image de fond est un dégradé vertical, rajoute dans ton outil graphique préféré la même hauteur en haut ou en bas de ton image (càd tu doubles la hauteur de ton image, à peu près mais sans toucher à l'aspect de l'image existante) et remplis ce nouvel espace avec ta dernière/première ligne répètée sur toute la hauteur. Et ensuite tu positionnes en CSS ton image de fond soit en haut soit en bas (rarement au centre) avec

background-position: left bottom;

par exemple.

3/ Si ton image se répète verticalement, alors tu n'as pas besoin de l'agrandir mais plutôt de la réduire: ne garde que le motif qui se répète et répète-le en CSS:

background-repeat: repeat-y;

Avantage: ton image est moins lourde en kilooctets et plus rapide à télécharger pour le visiteur !

4/ Si ton image n'est ni prévue pour être extensible en hauteur, revois ton design

PS: et plutôt que mes exemples de CSS, utilise la notation raccourcie

background: #444 url(../images/name.png) left_ou_right top_ou_bottom repeat-y;

/*
left_ou_right_ou_center_ou_pourcentage_ou_pixels 
top_ou_bottom_ou_center_ou_pourcentage_ou_pixels
toujours dans cet ordre-là !
*/

Modifié par Felipe (18 Jul 2009 - 15:22)

Ce n'est possible qu'en CSS3 avec la propriété background-size

Or CSS3 n'est pas encore compatible avec tous les navigateurs. Seul les derniers versions de Firefox, Safari et Opera (pour ne citer que les principaux) sont compatibles.

Pour Internet Explorer c'est comme d'habitude, il faudra repasser dans 10 ans...

Ok je vous remercie.
En bidouillant et en suivant vos conseils je devrais pouvoir y arriver.
Je sais que les navigateurs n'affichent pas tous "la même chose" et c'est bien embêtant ! Mais c'est une affaire de spécialistes (qui s'arrachent eux mêmes les cheveux) et je ne vais pas me prendre la tête avec ces questions qui me dépassent...

++

JPV56