Place background image outside border of containing div

Question

I am trying to set a background image to be outside the actual containing div.

<div class="expandable">Show Details</div>

.expandable
{
    background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}

so the "expand" image should basically appear just to the left of the div.

I can't get this working, the image doesn't show when it's positioned outside the borders of the container. I'm not sure if there's a CSS trick I am missing, or if it's something to do with my page layout (the "expandable" div is nested inside several other divs).

Is it possible to do this? Any hints?

Edit: here is a jsFiddle showing the problem: link

Answer 1

I know this is an old thread but I just wanted update it and add that this is possible using CSS pseudo elements.

.class:before {
    content: "";
    display: inline-block;
    width: {width of background img};
    height: {height of background img};
    background-image: url("/path/to/img.png");
    background-repeat: no-repeat;
    position: relative;
    left: -5px; //adjust your positioning as necessary
}