DIV background extend behind another DIV

Question

First time asking a question :)

My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?

HTML:

<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>

CSS:

#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
    background-repeat:no-repeat;
text-align:center;

}

#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;

}

#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;

}

#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
    border-right:thick #558c21 solid;
    border-left:thick #558c21 solid;

}

![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1

Answer 1

Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:

margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;