Question

I’m working on a design that has some image based shadows (can’t use CSS3 as they’re not simple shadows) on the content area, which needs to be flexible vertically.

The design has a white content area, with a shadow in the top right edge, a shadow on the bottom right corner and all the way along the bottom edge as you can see on the site.

In order to try and do this I’ve created a wrapper to try and deal with the top shadow, and then applied the background image to the bottom of the main content area within it to deal with the bottom shadows. I’ve then made the background white. My thinking is that the ‘bottom’ shadow image will always stick to the bottom of the content area no matter how much it expands, and the white colour will handle the rest.

Problem is, the shadow image obviously sits inside the div, and there is no way to make it hang ‘out’ of the container… so as you can see here it looks weird.

JSFiddle of the problem, you can see top shadow looks fine but the bottom one is sitting within the div so get’s coloured in by the background colour too.

I can’t get my head around a solution for this. Essentially that shadow sitting inside the div should be sitting neatly outside it.

HTML for quick reference:

<div id="contentWrapper">
      <div id="content">
            <h1>HTML Ipsum Presents</h1>
            <h2>Content in here</h2>
      </div>
</div>

CSS for wrappers and content areas:

#contentWrapper{
    background-image:url('../img/top-content.png');
    background-position:top right;
    background-repeat: no-repeat;
    width:820px;
    margin-left:200px;
}


#content{
    background-image:url('../img/bottom-content.png');
    background-position: bottom right;
    background-repeat:no-repeat;
    background-color:#FFF;
    width:802px;
}

Answer 1

You could use multiple backgrounds:

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top,
        url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    width:820px;
    margin-left:200px;
}

Demo: http://jsfiddle.net/Y2dSD/8/

EDIT:

To fix the bottom shadow, use

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top,
        url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    width:820px;
    margin-left:200px;
    padding-bottom: 15px;
}

Demo: http://jsfiddle.net/Y2dSD/13/

---

But that’s CSS3. If you want it to work on old browsers, add a new container:

HTML:

<div id="contentWrapper"><div>
      <div id="content">
            <h1>HTML Ipsum Presents</h1>
            <h2>Content in here</h2>
      </div>
</div></div>

CSS:

#contentWrapper{
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top;
    width:820px;
    margin-left:200px;
}
#contentWrapper>div{
    background:url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right;
    padding-bottom:15px;
}

Demo: http://jsfiddle.net/Y2dSD/17/