Geek Answers Handbook

Css sprite as background, limited part?

I need to put a 48x48 icon as a background. I have this icon in my sprite image, where, of course, there are many other images.

Is there a way to show only the image of the image as a background?

thank

EDIT: Is there any way to do this without setting the width width of the element's backgrounded element? (I'm not sure if I can set the width of the width)

Edit2: this is what I need: http://jsfiddle.net/pdxnj/

thank

+5
source share
6 answers

Set the width and height of the element to 48 pixels.

.element{
    width: 48px;
    height: 48px;
}

Set element background to image

.element{
    background-image: url('image.png');
}

Move the background so that the upper left corner of the icon is set correctly.

.element{
    background-position: 20px 94px;
}

- X Y (), 48px 48 . , , 96px 0px - .

, , DOM, , .

:

<div id="noControl">
    <span id="justCreated">
    </span>
</div>

CSS , , , :

#justCreated{
    display: inline-block;
}

EDIT 2

DOM, , , div .

:

<div id="noControl">
    <div id="justCreated">
        ALL of the content that used to be inside #noControl
    </div>
</div>

CSS

#justCreated{
    width: 48px;
    height: 48px;
    background-image: url('image.png');
    background-position: 96px 0px;

    z-index: -200;
    /* z-index of all the contents needs to be not set, or set to larger than -200 */
}

, .

, , . CSS, child (, #noControl > a), div .

, , DOM.

+2

, html- . html .

+1

, . .

/ , .

0

, , , , . , , , , 48x48, . ,

0

:: before :: after, .

0

. , div 48x48 position: absolute div left top . z-index: 0 div, .

-1

More articles:


All Articles