Search code examples
htmlcssbackground-imagecss-spritesclip

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

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:
enter image description here

2nd image:
enter image description here

Solution

  • 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!)