using sprites as background image for input fields without accidentally show other parts of the sprite [duplicate]

Question

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 around 300px. Anyone know a way or should I just slice them into different backgrounds.

Answer 1

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.