How to get background to the "true bottom" of the div


I’m sure the solution is simple and I’ll kick myself for not seeing it, but… :slight_smile:

I need the background image at the bottom of each of those divs (the part that looks like an arrow pointing toward the photos). Nothing I’ve tried is working. I don’t want the left/right borders to extend past the image.

What am I missing?


You can’t make a background cover the borders of a div because the background starts under the border.

I would do something like this instead.

*+html .quote{border-bottom:1px solid #e6e6e6}/* ie7*/
* html .quote{border-bottom:1px solid #e6e6e6}/* ie6*/

content:" ";
background:url( no-repeat 0 0;

(Note the above is over-ride not replacement code)
I used :after to place the image at the bottom which is supported from IE8+. IE7 and under just get a border-bottom instead.

Thanks so much, Paul. I didn’t even think of using :after.