8

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

2hamed
  • 8,719
  • 13
  • 69
  • 112

4 Answers4

3

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

Kyle
  • 65,599
  • 28
  • 144
  • 152
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.

techfoobar
  • 65,616
  • 14
  • 114
  • 135
  • The latter wouldn't allow the sprite to be used on the main `input` without re-ordering the layout of the spritesheet. – Kyle Aug 15 '12 at 08:14
  • @KyleSevenoaks - The sprite will need to be applied as background to the overlaid elements, not the input box itself. Since as you said, bg cannot be clipped with today's CSS tech. – techfoobar Aug 15 '12 at 08:15
  • Ah, now I get you. Ok that would work but would require some unneeded markup. – Kyle Aug 15 '12 at 08:18
  • @KyleSevenoaks - Actually, this can be done entirely via CSS using :before and :after pseudo elements, thereby avoiding the need for additional markup. – techfoobar Aug 15 '12 at 08:23
1

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
Samich
  • 29,157
  • 6
  • 68
  • 77
  • Reread the question please. I have an input element and I need it to be as big as it's shown in the image above. – 2hamed Aug 15 '12 at 08:07
0

with CSS3 you can use multiple background images for an element. to show a specific part from the image you need to set its background-position property.

for example:

background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;

you can also define background-postion in pixels like:

background-position: -5px 10px, -35px 10px;

for more information check this link

Amyth
  • 32,527
  • 26
  • 93
  • 135
  • Thanks, but this not what I asked. I know how to use multiple backgrounds. My main question was how to clip a background image. – 2hamed Aug 15 '12 at 08:03