How to use CSS sprites with textbox?

I'm trying to use CSS sprites in a text box. The image di开发者_运维问答mensions are 200x50 pixels and i want to display only part of the image lets say from (25px,25px)(x,y cordinates) with height 30px and width 50px.

.img_textbox
{
  background-image: url(images/ff.jpg);
  background-position: 25px 25px;
  background-repeat: no-repeat;
  height: 30px;
  width: 50px;
}

The above co-ordinates are decided by a third value, hence it varies according to the text in the textbox.

<input type="textbox" name="type" class="img_textbox" value="">

i tried using background-position and background-image properties, but didnt worked in my case.

How can i do it? What properties or tags should i use to make it work? please guide me...

thanks in advance..

I'm not sure there's at all a valid <input type="textbox">, you'd be better off using <textarea>.

css:

textarea.img_textbox {
  background-image: url(images/ff.jpg);
  background-position: 25px 25px;
  height: 30px;
  width: 50px;
}

html:

<textarea class="img_textbox" cols="5" rows="3">
  // value
</textarea>

Why not have a with the background class applied on it and the with transparent background and no borders inside?

css:

.img_textbox_back
{
  background-image: url(images/ff.jpg);
  background-position: 25px 25px;
  background-repeat: no-repeat;
  height: 30px;
  width: 50px;
}

.img_textbox
{
   background-color:transparent;
}

html:

<div class="img_textbox_back">
    <input class="img_textbox" />
</div>

Do you mean something like this demo fiddle?

HTML:

<span></span><input type="text" />

CSS:

span {
    background: url('images/ff.jpg') no-repeat 25px 25px;
    position: absolute;
    width: 75px;
    height: 55px;
    z-index: -1;
}
input {
    background: transparent;
}

Note that the text box is not inside the span to assure that the normal flow includes the (size of the) text box.

Of course you have to give height to the text box to show the image. Or you could use a textarea element.

You don't see the image at all or something else?

In my sprite, I use position like this:

   .sprt {background-image:url("<path>");background-repeat:no-repeat;}   
   .arrow{
      background-position:-25px -25px;
      width:50px;height:30px;
    }

Then I use <span class="sprt arrow"></span> to show an arrow

Note the '-' before this coordinates.

Do you mind trying this?

textarea.img_textbox {
  background-image: url("images/ff.jpg");
  background-position: -25px -25px;
  height: 30px;
  width: 50px;
}