Using a Sprite image with input

I am wondering if it is possible to use a sprite where each image is 16 x 16 as a background to an input text/textarea which is aroun开发者_开发百科d 300px. Anyone know a way or should I just slice them into different backgrounds.

Your needs may be an excellent candidate for Diagonal CSS Sprites.

The idea is that you can use the sprite as a background image in a variable or larger-sized context without fear of other graphics in the sprite showing up.

Why a Diagonal Sprite?

With the sprite built on a diagonal there are no components below or to the right of the component you are showing. This allows for the element using the sprite to be as wide or as tall as it needs to be with no worry of exposing the next component.

Naturally, this is at the cost of a larger sprite file size because of the extra white space, however the flexibility is usually worth the file size tradeoff.

Well, you could just put each sprite 300px apart in the sprite sheet, so only one can be seen in the box at a time.

Set:

background-repeat: no-repeat;

And for textbox2 do:

background-position: -300px 0;

Or something.

You might try to do this that way:

Yes, it's certainly possible to use a sprite on an input, but I'd strongly suggest against it if you care about browser compatibility. Background images on input elements in Internet Explorer 7, for example, don't stay in a fixed position so as you type, the background image will move. If you're using a horizontal sprite, that could be especially problematic. I'd suggest putting the input in a container element that has the background. And to that end, make sure there's extra room surrounding each image for browser and device inconsistencies with form element spacing/heights/margins/padding. Using a reset CSS stylesheet would be helpful at the start. And test and test again!