Créer une image en fond de titre

Bonjour !

Je cherche à créer des titres disposant d'un fond dégradé (gauche-droite par exemple). Le truc du bloc texte en superposition de l'image semble ne pas fonctionner, de plus, visuellement, si la taille de l'image de base est trop éloignée de la longueur finale à couvrir, le résultat est franchement moche (ex: image de 100 pixels de large avec un titre <h1>ceci est un titre super long</h1>)

Comment puis-je, en CSS plus ou moins pur, réaliser cet habillage de mes balises h1, h2 et h3 ?

Merci d'avance !

Jean-Luc

Bonsoir,
Si j'ai bien compris tu dois pour cela attribuer un background se répétant à ton titre sans oublier d'adapter la hauteur de ton fond au corp du texte, éventuellement une hauteur et sans oublier une couleur de fond:
Exemple

h1 {background: #666 url(monimage.png) x-repeat; height: 30px}

Bonsoir,

Et s'il s'agit d'un fond à motif, crée le pour une hauteur suffisant en cas d'aggrandissement de la taille de caractère, faisant passer le titre à la ligne.
tu peux toujours faire une image en longueurqui part en applat de couleur vers la droite, sur une bonne longueur de pixels, pour que l'image remplisse tout le bloc en cas d'allongement du titre. La partie en applat n'alourdira pas ton beaucoup ton image.

OK ! Par contre, comment jouer avec la largeur du texte ? Je m'explique: je souhaite avoir une image "étirable" en largeur, à partir d'un background de 100 px par exemple, et être capable d'avoir une image prenant tout le fond même si le titre fait 400 px de large, sans avoir 4 fois le motif..

En gros, une propriété
h1 {background: #666 url(monimage.png); background-width: 100%; height: 30px}.

Merci d'avance pour toute aide,

Jean-Luc

Salut,
background-width n'existe pas et tu n'as pas la possibilité d'agrandir
ou de réduire une image de background contrairement aux image insérées
directement. Tu dois modifire la taille de ton image dans ton éditeur graphique.

Hélas, j'avais bien compris ! Mais comment faire quand on a un design fluide (3 colonnes, 25 % | 50% | 25%) ? J'ai besoin d'avoir une image qui puisse s'adapter aux différentes configurations des postes client, donc de trouver une astuce pour recréer l'effet "background-width=100%".

N'y a-t-il pas un autre moyen ?

Merci d'avance pour toute aide,

Jean-Luc

Bonjour,

Dans le cadre d'un dégradé d'un couleur bleu à vert par exemple, allant du bleu (à gauche) vers le vert (à droite), peut être peut tu mettre en place une couleur de background sous ton image qui se subsituera à celle-ci et qui occupera tout le reste du conteneur non occupé par l'image ?!

background: #vert url('imgbleutovert');

Modifié par Jedi (29 Jun 2006 - 13:56)

@ jedi
Pour info les guillemets sont déconseillés à cause de IE mac qui ne lit pas les background qui en sont entourés. (url('imgbleutovert'),)

Dans le cas d'un motif, si tu considères qu'allonger horizontalement
ton image ne constitue pas une perte de qualité esthétique,
tu dois alors superposer ton texte à une image positionnée en absolue ou en relatif avec la propriété z-index (minimum) pour qu'elle passe sous ton texte lui même positionné avec un z-index supérieur.
Absolue ou relatif à toi de voir ce qui te convient le mieux.

exemple:

<img id="fond" src="tonimage" height="30px" width="85%" alt="" />

CSS:
#fond {position:absolute; z-index:1;}

Sachant qu'un élément en positionnement absolue dénué de de propriété
de positionnement (top....) s'affichera a l'endroit ou il se trouve dans le
code mais sorti du flux courant.
Modifié par Hermann (29 Jun 2006 - 14:22)

Hermann a écrit :
@ jedi
Pour info les guillemets sont déconseillés à cause de IE mac qui ne lit pas les background qui en sont entourés. (url('imgbleutovert'),)

Outch... merci pour l'info

Ceci dit, mettre en place sans guillement une image portant le nom d'une propriété ne causera pas de soucis ?!

Exemple :

background: url(transparent.gif);  /* Transparent choisi à titre d'exemple */

Jedi a écrit :

Ceci dit, mettre en place sans guillement une image portant le nom d'une propriété ne causera pas de soucis ?!

Non puisqu'il il n'y a pas de proriété possible à l'interieur de url().

M'ci