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 } 

Answer 2

You're going to have to put the background image inside a separate element. Background image positions cannot place the image outside the element they're applied to.

edit your question jogged my memory and I went and checked the CSS specs. There is in fact a "background-attachment" CSS attribute you can set, which anchors the background to the viewport instead of the element. However, it's buggy or broken in IE, which is why I've got it sitting on the "do not use" shelf in my head :-)

edit — Note that this answer is from 2010, and newer (and, more importantly, widely-supported) CSS capabilities exist in 2016.