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

HTML & CSS
1

URL: http://goo.gl/BKvAG2

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?

2

Hi,

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.


.quote{background:none;position:relative;margin-bottom:10px}
*+html .quote{border-bottom:1px solid #e6e6e6}/* ie7*/
* html .quote{border-bottom:1px solid #e6e6e6}/* ie6*/

.quote:after{
content:" ";
position:absolute;
bottom:-16px;
left:0;
right:0;
height:20px;
background:url(http://clients.ohhellodesigns.com/oh5/wp-content/themes/ohhello5/images/quote.png) 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.

3

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