28172 sujets

CSS et mise en forme, CSS3

Background image sur un input d'un formulaire

Bonsoir à tous,

J'aimerais inséré une image d'arrière plan dans mes input du formulaire de contact en utilisant la méthode des sprites CSS.
Et j'ai un problème, car je ne peux pas administrer de largeur à mes input, sinon ils se réduisent, et ce n'est pas ce que je veux.

Voici le rendu :
http://www.netpom.fr/img/sprites.png

Voici mon code CSS :

#form-contact #nom, #form-contact #email, #form-contact #telephone, #form-contact #message { background:#ffffff url('../img/contact/icones-form.jpg') no-repeat; padding-left:30px; }
		
#form-contact #nom { background-position:0 0; }
#form-contact #nom:hover { background-position:0 -30px; }
#form-contact #email { background-position:-30px 0; }
#form-contact #email:hover { background-position:-30px -30px; }
#form-contact #telephone { background-position:-60px 0; }
#form-contact #telephone:hover { background-position:-60px -30px; }
#form-contact #message { background-position:-90px 0; }
#form-contact #message:hover { background-position:-90px -30px; }


Voici mon image icones-form.jpg :
http://www.netpom.fr/img/icones-form.jpg

Où est-ce que je pourrais mettre ma largeur afin de ne pas avoir le reste des images ?
Bon sinon je peux toujours faire une image où les icônes sont les unes en dessous des autres, mais avec ce type d'image que j'ai là, est-ce que c'est faisable ?
Modifié par fanny95 (11 May 2011 - 18:28)
Pour quelle raison tu ne veux pas changer la largeur du input ?

Si non tu peut mettre l'input dans un div avec la largeur de ton image puis mettre overflow:hidden

Personnellement je reduirai la taille de l'input, c'est le plus facile à faire. Si non il faut couper les images pour quelles n'affichent que celle qui correspond à l'id de l'input.
Modifié par logicdesignbe (11 May 2011 - 19:06)
Bonjour,

l'utilisation d'une largeur et hauteur pour le background-image n'est à ma connaissance pas vraiment possible.

Il y a plusieurs solutions, mais si tu veux vraiment utiliser les sprites, alors mettre une div ( ou tout autre élément ) dimensionné avec l'image en background, en position absolute, sous ton Input sera je pense la seule viable.
Modifié par n3k0 (11 May 2011 - 19:43)
C'est pas que je ne veux pas réduire la largeur de mon input, mais si je le fais, bah il n'y aura plus de place pour écrire dedans. Alors je ne vois pas l'intérêt.
Tant pis, je vais faire une image différente avec des icônes les unes en dessous des autres.
Pas la peine de surcharger le code HTML avec des div et input etc.
Sujet clos
Aller à