How to clip an element's background to display only a part of the image?

Question

For clarification look at the following images.
The first one is what I intend to achieve. It's a text input element with two background images, one on each side.
The second image is the sprite image containing the icons I need.
Now my question is, is it possible to clip a background image to only display a portion of the image? Furthermore is it possible to use it with multiple backgrounds?

1st image:

2nd image:

Answer 1

You're going to have to use two separate icon images to get this to work as you expect at the moment.

With CSS sprites, the background is clipped by the size of the element, there is an experimental CSS3 property called background-clip but it doesn't work the way you want (it will clip to the borders, padding or content of the box, not a specific dimension.)

So create two icons, use one on each side of the element with background-position.

As you can see here, with a spritesheet it will display the entire background image instead of the two icons you want. There is as yet no way to clip BG images in the way that you want. (one day, hopefully!)

Answer 2

You will need to use separate icons OR you will need to have 2 additional elements (for showing the icons) overlaid on top of the input box. The latter will let you use the sprite itself.

Answer 3

Set to your element (let's say div) yor big backgound picture and then adjust with background-position. Your image will be croped by your element size (ex. div).

in your case it will be around:

background-position: -87 -35;

and div size:

width: 28px; height: 30px