CODEWITHSUNDEEP
htmlcss
Shishant
Shishant

Reputation: 9294

Background Image after end of div

I want to place a background-image after end of div bottom for a shadow effect. I am not using pseudo elements as they are not supported in older IE. So is there a way I can place it at bottom without adding a extra unsemantic div.

Link of what I am doing & trying to achieve: http://jsbin.com/ebowom

CSS

.border_block {
    background: url("http://i53.tinypic.com/161f5af.png") no-repeat scroll center bottom  rgba(255, 255, 255, 0.60);
    border-radius: 10px 10px 10px 10px;
    height: 344px;
    margin: 0 auto;
    padding: 8px;
    width: 920px;
  }

  .main_block {
    background-color: #fff;
    height: 100%;
  }

HTML

<div class="border_block">
<div class="main_block">
Hello World
</div>
</div>

Upvotes: 1

Views: 969

Answers (3)

Remi
Remi

Reputation: 21175

I agree most with Wesley's 4th point, bite the bullet: wrap your div with another div that contains the border. You'll get your beautifull effect with little overhead and clean code that will probably work on every browser.

For the less experienced who clicked this interesting question, it goes like this:

the html contains the div:

<div class="border_block"><div> Content here ... </div></div>

the css looks like:

   body { text-align: center; background-color: #a5a694;}

  // div with content and shadow
  .border_block {  
    background: url("http://i53.tinypic.com/161f5af.png") no-repeat scroll center bottom  rgba(255, 255, 255, 0.60);
    width: 920px;
    background-position: bottom;
    background-color: #a5a694;
    padding-bottom: 12px;
    margin: 0 auto;
  }


  // div for the actual content
  .border_block div{    
    background-color: #FFF;
    height: 344px;
    padding: 8px;    
    border-radius: 10px 10px 10px 10px;
    border: #CCC 8px solid;
  }

(Note that border-radius is not supported for IE8 or lower)

Upvotes: 0

Joonas
Joonas

Reputation: 7303

Here you go: http://jsbin.com/oyozin

Edit: And if youre wondering about the inner container part.. http://jsbin.com/oyozin/2

Upvotes: 0

No Results Found
No Results Found

Reputation: 102784

Some things you can do:

  • Check out PIE.htc and see if you can reproduce the shadow with CSS instead of an image (good idea anyway)

  • Use ie8.js to force 6 and 7 to render psuedo elements (very slow performance with this though)

  • If you're using jQuery, maybe try the Psuedo Plugin. It's a bit hacky, as it adds <span> tags with .before and .after classes, so I'm not a big fan of it - but the performance was better than ieX.js. (Tested with jquery 1.6 and it does still work)

  • Bite the bullet and add the extra wrapper div

  • Easiest: Let your few IE6 and 7 users "suffer" without the shadow effect.

Upvotes: 4

Related Questions