[Résolu] -moz-border-radius avec une image en fond?

Bonjour,

J'aimerais utiliser la propriété CSS -moz-border-radius avec une image de fond et non pas une couleur. Seulement, l'image de fond n'est pas arrondies alors que la bordure l'est bien. Y-a-t-il une solution??

Merci beaucoup!

a+
agilis


PS:
Je sousigné agilis affirme que la propiété CSS "-moz-border-radius" est non-valide et fonctionne uniquement avec les naviguateur propulsé par le moteur gecko et en assume toutes les conséquences.
Modifié par agilis (30 Jun 2005 - 14:27)

Personne n'as d'idées? Personne n'as eu le même problème que moi?

Merci d'avance

Il n'y a pas de solution à tes désirs.
Le background est l'expression du "block" rectangulaire et le -moz-border-radius entre dedans. L'effet fonctionne sans image de fond. Peut-être bientôt avec css3 border-radius. (pas sûr)

Salut,

Dans un premier temps, j'utiliserais ce tutoriel:

Ajuster une image de fond

Et, pour la division supérieure, je ferais mes coins arrondis à l'aide de 4 petites images.
(Tuto décrit dans le bouquin de Raphaël -> p.193-195)

On obtiendrait alors l'effet recherché.

@+
Modifié par koala64 (30 Jun 2005 - 00:51)

Merci beaucoup!

En fait, ce n'est pas vraiment une image mais plutôt un motif (des diagonales). De plus les boites sont de hauteur variable. Je pense que la meilleure solution est de faire en trois partie, 1 pour le dessus, 1 pour le dessous et une pour le centre. Qu'en pensez-vous? J'aurais bien aimé ne pas utiliser d'images quitte à ce que ce ne soit compatible qu'avec firefox mais bon...

Merci!

Salut,

Si seule la hauteur varie, tu peux effectivement procéder comme celà.

Maintenant, si je t'ai orienté sur les images, c'est parce que celles-ci vont couvrir ton motif avec leur partie opaque ce qui va te permettre de faire croire à l'angle arrondi directement appliqué au motif. A ma connaissance, les autres méthodes pour faire des coins arrondis ne t'offrent pas cette possibilité.

Enfin, pourquoi ne chercher qu'à être compatible FF ? Cette limitation t'enlève la majeur partie de tes visiteurs...

Je ne cherche pas à être uniquement compatible avec firefox mais je trouvais la solution border-radius beaucoup plus facile. Je ne n'avais pas compris les image pour les coins comem cela. C'est vrai que c'est une bonne idée mais malheureusement, j'ai un motif en dessous aussi . Ca va faire beaucoup quand même ca... Faudrait peut-être que je retravaille ca... En tout cas merci beaucoup!
Conclusion, soit je fais avec trois images, soit je retravailel mon design.

Encore merci ! (je ne vous le dirai jamais assez!)

Résolu.

a+

agilis a écrit :
(...) Je ne n'avais pas compris les image pour les coins comem cela. (...) malheureusement, j'ai un motif en dessous aussi (...)

Oui c'est normal puisqu'en te proposant celà, je détourne la méthode d'origine. En fait, là tu dois mettre l'intérieur de ta division en transparence et le côté convexe de tes angles arrondis opaques. Ensuite, tu viens recouvrir ton motif en donnant une taille identique à ta div et ton motif. C'est le principe du lien que je t'avais laissé plus haut.

Tout à fait le genre de bidouille que j'aime bien avec les css.