Question

I have an object like this:

<div class="myObject">My Object</div>

I want to display a image in front of that <div>‘s box, I thought code like this will work:

.myObject {
    background-image: url(foo.png);
    background-position: 0px -20px;
}

But, unfortunately, this does not work.

How can I accomplish this goal using CSS?

PS: What I want is just to display that image outside that tag’s box, don’t tell me to do like this:

.myObject {
    padding-left: 10px;
    background-image: url(foo.png);
    background-position: 0px 0px;
}

Thank you.

Answer 1

You can’t position a background image on an element outside the box.

To place an image to the left of an element, using pure CSS, the :before pseudo-element can be used:

Demo: http://jsfiddle.net/2HEpn/

.myObject:before {
    content: " ";
    background-image: url("/favicon.ico");  /* a 16x16 image, for example */
    width: 16px;
    height: 16px;
    display: inline-block;  /* pseudo-elements are inline by default */
}