SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    URL: http://goo.gl/BKvAG2

    I'm sure the solution is simple and I'll kick myself for not seeing it, but....

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Paul. I didn't even think of using :after.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •