Background-image dans un input: fixed et no-repeat marchent pas!

Bonjour à tous!

Alors voilà mon problème, ça fait une heure que je cherche partout et je n'ai pas encore trouvé de piste.

J'ai dans mon site web un <input>, et j'aimerais qu'à la gauche du input il y ait une image. Donc:

input {
  background: white url(../images/search_drop.gif) no-repeat fixed 1px 50%;
}

Comme vous pouvez voir, la couleur de fond doit être blanche, l'image doit apparaître à la gauche du input, au mileu (verticalement), ne doit pas se répéter et doit rester visible même lorsqu'on écrit assez de texte pour faire "scroller" le input (fixed).

Si je met scroll au lieu de fixed, pas de problème! Sauf que dès qu'il y a trop de texte, .image disparait vers la gauche.

Mais si je met fixed, alors là, tout disparait! C'est tout simplement un champ blanc... Et ça se produit sous IE et sous FF... ouch!

Merci de votre aide, je ne sais plus où chercher!
Modifié par DarkMalow (08 Dec 2006 - 17:42)

hello, as tu un exemple en ligne pour mieux illustrer cela ?

Bonjour,

Hum...
Le comportement décrit me semble tout à fait normal : ton background reste en place là où il doit, à savoir à gauche de ton texte de saisie. Seulement quand tu rajoutes du texte, et que cela déborde du champs forcément, la partie gauche disparait pour que l'on puisse voir ce que l'on tape...

Et vu que l'on tape de gauche à droite ...
Eh ben c'est la partie droite qui reste visible...
Plutôt logique, non ?!?

Enfin, tout ça pour te dire que je ne pense pas qu'il s'agisse là d'un bug, mais d'un comportement tout à fait normal...
Je ne vois pas comment tu pourras contourner ça.

Voici un exemple pour mieux illustrer mon probleme:

Ici

Comme vous pouvez voir, dans le 2e input, l'image a totalement disparue!

Et dans le premier, lorsqu'on écrit suffisament de texte, l'image se cache vers la gauche (ce qui est effectivement un comportement normal).

Ce qui est anormal, c'est le 2e input. J'ai mis "fixed" au lieu de "scroll" afin que l'image reste toujours à la meme position, meme si on écrit une multitude de texte dans le input. Sauf que ce que ça fait, c'est que l'image disparait, tout simplement!
Modifié par DarkMalow (08 Dec 2006 - 17:57)

bon je me prends la tête sur ce truc là....mais sans trouver non plus...

J'ai par contre deux choses pour toi:

la première c'est que ton image s'affiche mais qu'on ne la voit pas car elle est en dehors de la zone et centrée verticalement . ( on le voit en changeant la taille du texte , en tout cas sur FF).

D'après ce que je comprends également , c'est pas génial de mélanger les % et les pixels mais j'ai essayé de modifier ca mais sans résultat....

Désolé

Hmm... je ne suis pas certain de comprendre ton premier point. Sous Firefox, j'ai essayé de changer la atille du texte, d'agrandir le height du <input>, mais je n'ai jamais vu l'image que tu sembles voir.

Quant au deuxième point que tu apportes, eh bien j'ai tou simplement mis 1px 1px au lieu de 1px 50%, mais comme tu l'as mentionné, ca ne change rien...

Merci d'avoir essayé!

Quelqu'un d'autre connaitrait la réponse?

DarkMalow a écrit :
Hmm... je ne suis pas certain de comprendre ton premier point. Sous Firefox, j'ai essayé de changer la atille du texte, d'agrandir le height du <input>, mais je n'ai jamais vu l'image que tu sembles voir.

J'ai constaté comme Rose Grenouille...
en fait, il faut que tu agrandisse le texte comme un barbare ...
Et tu finis par la voir apparaître puis disparaître fugitivement
Modifié par Cygnus (08 Dec 2006 - 19:56)

Bon, eh bien j'ai utilisé une autre méthode... qui fonctionne bien mieux.

<div id="search">
  <div id="imgSearch"><input type="text" /></div>
</div>

div#imgSearch {
  background: white url(../images/search_drop.gif) no-repeat 1px 1px;
  padding-left: 22px;
  width: 175px;
}

div#search input {
  height: 18px;
  width: 153px;
  padding-top: 2px;
  background-color: white;
}

Merci!
Modifié par DarkMalow (08 Dec 2006 - 21:04)