JavaEar 专注于收集分享传播有价值的技术资料

DIV background extend behind another DIV

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

3个回答

    最佳答案
  1. Not really sure if I understand you correctly but try to add:

    position: relative;
    top: -10px;
    

    to #side-bar as you can see here http://jsfiddle.net/NpZJV/

    If I may advice, don't use % for width/height and positions use px instead.

  2. 参考答案2
  3. 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;
    
  4. 参考答案3