Place background image outside border of containing div

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