Discussion :

[Invité]

Bonjour,

voivi mon problème :
je dois mettre une image de fond aux bords arrondis dans un div. Ce div est étirable selon la longueur du texte. J'ai donc découpé le fond de l'image (les quelques lignes de pixels qui ont l'arrondi) et l'ai "posé" au fond du div. Le reste de l'image est positionné en haut.

Je voudrais que entre les 2, un couleur vienne se mettre pour combler le vide.

J'ai tenté ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: url(../../images/fond_caddie.gif) repeat-y #6b91a6;

mais ça me répète l'image.

Quelqu'un peut m'aider ?

[hed62]

Personnellement, j'ai une méthode, certainement mauvaise d'ailleurs...

Tu découpe ton image en 9 (coin haut gauche, haut, coin haut droit, etc...)

Et tu place tous ces éléments correctement ensuite.
les haut et bas on un repeat-x , les élements gauche et droite un repeat-y, le centre se répète dans les deux sens, les coins restent fixes.

Ce div est étirable selon la longueur du texte.

En largeur, en hauteur ?

Si un seul des deux sens s'étire, tu peux simplifier la chose.

Enfin, ca reste une méthode pas terrible je trouve... Si quelqu'un a mieux...

[Invité]

Il s'étire sur la hauteur, vers le bas.

On m'avait indiqué plus simple que découper en 9 mon image.
Merci pour ta réponse en tout cas, peut être y a-t-il plus simple ?

[hed62]

Puisqu'il n'y a qu'une direction tu peux restreindre à 3.

[Invité]

Je vais essayer comme ça. Je reviens pour vous tenir au courant.

Merci

[Er3van]

Il n'y a pas encore de moyen propre pour faire des arrondis, ou n'importe quelle autre forme géométrique différente du rectangle.

Le recours aux images est donc la solution la plus simple et efficace.

Je pratique aussi le découpe en 9, ça marche plutôt bien, mais ça peut devenir galère à gérer selon le type de positionnement que tu emploies dans le cas où tu n'utilises pas de table.