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

score 40 · Answer 1 · answered Aug 21 '14 at 16:38

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
}

Pointy · Accepted Answer · 2016-11-17T19:47:42.190

18

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.

edited Nov 17 '16 at 19:47

answered Aug 23 '10 at 13:53

Pointy

405,095
59
585
614

that sucks!! oh well, looks like jQuery will have to rescue me again :) – fearofawhackplanet Aug 23 '10 at 13:58
The "background-attachment" thing is pretty weird anyway, and it might be more trouble to use it than to use a companion element. I doubt you could make "background-attachment" work purely from CSS, because when you use it the positioning values reference the window and have nothing to do with the element. Thus you'd have to compute what those coordinates should be, and that seems like a big pain. – Pointy Aug 23 '10 at 13:59

Russell Leggett · Answer 3 · 2013-10-21T16:15:33.140

You can't do this how you want to exactly, but there is a pretty straightforward solution. You can put another div inside of .expandable like:

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

Then your CSS would look something like:

.expandable{ position:relative; }
.expandable-image{ 
    position:absolute; top:0px; left:-20px;
    width:<width>px; height:<height>px;
    background: url('./images/expand.gif') no-repeat;
}

Jeff · Answer 4 · 2013-04-01T14:59:52.680

Depending on the details of your situation, you might be able to get away with CSS3's border-image-* rules. For instance, I used them effectively to place "dummy search buttons" in the filter row of a CGridView widget in yii (clicking anywhere outside the filter's input boxes will trigger the ajax call, but these "buttons" give the user something intuitive to do). ~~It wasn't worth it to me to subclass the CGridColumn widget just to hack the html in its renderFilterCell() method~~ * -- I wanted a pure CSS solution.

  .myclass .grid-view .items {
    border-collapse: separate ;
  }

  .myclass .grid-view .filters td + td {
    border-image-source: url("/path/to/my/img_32x32.png");
    border-image-slice: 0 0 0 100%;
    border-image-width: 0 0 0 32;
    border-image-outset: 0 0 0 40px;
    border-width: 1px;
  }

  .myclass .grid-view .filters input {
    width: 80%;
  }

There is a little bit of a trick involved in the border-image-width values -- that 32 is a multiplier not a length (do not put px) of the unit used in border-width (ie 1px). The result is fake buttons in the first n-1 columns of the gridview. In my case, I didn't need anything in the last column because it is a CButtonsColumn which does not have a filter box. Anyway, I hope this helps people looking for a pure CSS solution 😀 :-D

* Not long after writing this, I discovered I can just concatenate code for an image in the 'filter' property of the array used to construct the CGridColumn, so my rationale turns out to be moot. Plus there seems to be an issue (in Firefox, anyway) with the border-image-repeat being forced to stretch even when space is specified. Still, maybe this might come in handy for someone 😕 :-\

This is absolutely fantastic, thanks for sharing so much! I'm writing a firefox addon, so i got it to work in firefox the way i needed it, works great! Thanks! — Noitidart, Feb 14 '16 at 06:02

Place background image outside border of containing div

4 Answers4