Forums : Xul, Xbl, JS...

Aller à la discussion :  Plus récente Plus ancienne

# [CSS/?] Étirer une image de fond

Envoyé par : Utilisateur anonyme

Date : 29/01/2006 18:58

Hello, encore moi et les CSS :)
J'ai une petite image de 20x20 que j'aimerais placer en tant qu'image de fond d'un bouton, histoire de faire un zoli dégradé.
Malheureusement Gecko n'implémente pas encore la propriété CSS3 (-moz-)background-size qui m'aurait permis de faire :

button {
    background-image : url("button_back.png") ;
    -moz-background-origin : border ; /* OK */
    -moz-background-size : 100% 100% ; /* Étire l'image de fond sur tout le bouton : KO */
}

Existe-t-il un moyen d'étirer une image de fond sans passer par background-size pas encore implémenté ? Ou du moins d'obtenir un effet de dégradé de couleur par une méthode quelconque ?
Merci bien pour votre attention.

# Re: [CSS/?] Étirer une image de fond

Envoyé par : laurentj

Date : 29/01/2006 19:17

Existe-t-il un moyen d'étirer une image de fond sans passer par background-size pas encore implémenté ?

non

Ou du moins d'obtenir un effet de dégradé de couleur par une méthode quelconque ?

non plus à ma connaissance. Par contre, tu peux peut-être t'en sortir avec background-repeat.

# Re: [CSS/?] Étirer une image de fond

Envoyé par : Utilisateur anonyme

Date : 29/01/2006 19:27

non plus à ma connaissance. Par contre, tu peux peut-être t'en sortir avec background-repeat

Le problème avec background-repeat est qu'il faudrait que mon bouton soit d'une hauteur fixe (non ?), or je cherche plutôt une solution passe-partout qui fonctionnerait qque soit les dimensions de l'élément à décorer.
Si quelqu'un a une autre idée... :)

# Re: [CSS/?] Étirer une image de fond

Envoyé par : laurentj

Date : 30/01/2006 10:03

Le problème avec background-repeat est qu'il faudrait que mon bouton soit d'une hauteur fixe (non ?),

Non, il suffirait que tu fasse une image suffisement grande pour que la plupart des boutons soit corrects. (genre le double de la hauteur normale pour être tranquille). C'est une technique courament utilisée .

# Re: [CSS/?] Étirer une image de fond

Envoyé par : Utilisateur anonyme

Date : 30/01/2006 18:28

Bof, c'est assez casse-gueule et le rendu sera rarement optimal. Je préfèrerai vraiment avoir un truc universel qui permettrait à l'image de fond s'adapter au conteneur. Pas grave, j'attendrais l'implémentation de (-moz-)background-size, d'ici là je reste au background-color.

# Re: [CSS/?] Étirer une image de fond

Envoyé par : thefab

Date : 30/01/2006 18:30

Tu peux aussi spécifier la direction dans laquelle doit se répéter l'image:

background-repeat: repeat-x;

Ton dégradé se répète uniquement sur la largeur.

# Re: [CSS/?] Étirer une image de fond

Envoyé par : Utilisateur anonyme

Date : 30/01/2006 19:21

Oui, j'avais pensé à ça, mais il faudrait que le bouton et les autres éléments sur lesquels je compte mettre le même fond aient une hauteur fixe, ce qui me semble tout sauf pratique :|
Merci quand même thefab.

Il n'est plus possible de poster des messages dans ce forum.


Copyright © 2003-2013 association xulfr, 2013-2016 Laurent Jouanneau - Informations légales.

Mozilla® est une marque déposée de la fondation Mozilla.
Mozilla.org™, Firefox™, Thunderbird™, Mozilla Suite™ et XUL™ sont des marques de la fondation Mozilla.