Question

Is it possible to position a sprite icon as a background of an element?
I have a file, “icons.png” which contains several icons. I want to select one of those as a background of an element.
Usually I would use
.sprite {
background: url('imgs/icons.png') no-repeat 0 -21px;
width: 17px;
height: 10px;
} and use this class for a button, etc…

The problem is I have a text input and I want to modify it’s placeholder
.First I did this, which works perfectly if the file I use is the icon itself

:-webkit-input-placeholder{ background: url('singleIcon.jpg') center right no-repeat; }

But now I want to use a file which contains more icons.
Is it possible to use something like this ?

:-webkit-input-placeholder{ background: url('imgs/icons.jpg') center right no-repeat; }

The problem in the last line of code is that it will select all my image (which of course contains all my icons I want to use on the website), I want to select only a part of that image ( the icon I want to use )

Answer 1

Actually, the sprites are used only as background (or you’ve to set up some kind of complicated cropping).

What you have to do is to set the size of the element to the same sprite’s part that you have to show, and the position of the background equal to the x and y coordinates of the icon in the sprite, starting from the top left.

---

An example taken from this nice article:

“Item 2” is 116×48, begins at 12px (x coord) and 70px (y coord).

So your element’s CSS should be:

.element {
    width:116px;
    height:48px;
    background:url(sprites.png) -12px -70px no-repeat;
}

But, what if your element is taller/wider than the above dimensions? Then, you’ve to isolate that icon with enough transparent/white space so that the other icons won’t show up.

If you look up at Facebook sprites, you’ll notice that some of them are very long, some others groupped, some others isolated. You’ve to adapt the sprite for each situation.

---

Edit: ok, i got your actual needing.

It’s not easy with inputs because you can’t use pseudo-elements on it. Here comes a workaround.

Demo

First of all, wrap the input inside a div:

<div class="inputWrapper">
    <input type="text" placeholder="placeholder text">
</div>

Then add some CSS:

div.inputWrapper {
    position:relative; /* that's important */
    float:left; /* or display:inline-block; */
}
div.inputWrapper:after {
    background:#000 url(sprites.png) 0 -2px no-repeat; /* adjust background position */
    content:" "; /* whitespace needed for the pseudo-element to be displayed */
    position:absolute;
    top:1px; right:2px; /* some room for the borders */
    width:16px; /* icon width */
    height:18px; /* icon height */
}​
div.inputWrapper input {
    padding-right:16px; /* so the text won't go behind the icon */
}

I know it’s complicated, but the alternative is to create another http-request … the choice is yours.