Question

我有一个div，其中包含具有相对位置且受980px宽度限制的内容。我试图给这个div一个背景图像横幅，它将展开100％的屏幕宽度。我似乎无法弄明白。

我试图抛出图像的div是#design-background应该是div的背景#bottom_

提前致谢：

<div id="container-content">

         <div id="content">

            <div id="all-content">
               <div id="top-content">
                  <div id="top-left-content">
                     <div class="content-body" role="main" aria-label="Main Content Area"><div class="editorContent"><div style="font-family: ralewayregular; font-size: 120%; color: #a5610b; line-height: 200%; text-align: justify;">
<p>stuff</p>
</div></div><div style="clear:both;"></div></div>                  </div>
                  <div id="top-right-content">
                      <p>stuff</p>
                  </div>

               <div id="bottom-content">
                <div id="design-background">
                </div>
                   <div id="bottom-left-content">
                     <div id="bottom-left-top">
                        <a href="#">
                           <img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194">                           <h3>EXAMPLE</h3>
                        </a>
                     </div>
                     <div id="bottom-left-bottom">
                        <a href="#">
                           <img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195">                           <h3>EXAMPLE</h3>
                        </a>
                     </div>
                  </div>
                  <div id="bottom-center-content">
                    <div id="bottom-center">
                     <a href="#">
                        <img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406">                        <h3>EXAMPLE</h3>
                     </a>
                     </div>
                  </div>
                  <div id="bottom-right-content">
                     <div id="bottom-right-top">
                        <a href="#">
                           <img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195">                           <h3>EXAMPLE</h3>
                        </a>
                     </div>
                     <div id="bottom-right-bottom">
                        <a href="#">
                           <img src="/images/layout/layoutImg2.jpg" alt="" width="308" height="195">                           <h3>EXAMPLE</h3>
                        </a>
                     </div>                  

                  </div>
               </div>
               <div id="bottom-text-content">
                    <p>stuff</p>
               </div>
            </div>            
         </div>
      </div>
      </div>

CSS：

#design-background{
    position:absolute;
    height:350px;    
    top:50%;
    left:0px;
    right:0px;    
    margin-top: -175px;    
    background: url('../images/background-dec.jpg');    
}




#content{     
    position:relative;    
    margin: 0 auto;
    left:0;
    right:0;
    width:980px;

}


#all-content{
    display:block;
    position:relative;
    width:98.9%;
    margin: 0 auto; 

}
#top-content{

    margin: 0 0 0 13px;
    position:relative;
    display:block;
    width:98.9%;
    min-height: 165px;


}
#top-left-content{
    position:relative;
    width:65%;
    left:0;
    margin-top: 10px;

}
#top-right-content{
    position:absolute;
    right:0;
    top:0;
    width:35%;    
    margin-top: -30px;
    text-align: right;

}
#bottom-content{
    position:relative;
    display:block;    
    text-align:right;
    height:407px;

}
#bottom-left-content{
    width:33%;
    position:relative;
     float:left;
     height:407px;
     margin-right:3.5px; 

}
#bottom-center-content{
    position:relative;
    width:33.33%;
     float:left;
     height:407px;
     text-align: center;    

}
#bottom-right-content{
    position:relative;
     float:right;
     width:33%;
     height:407px;

}
#bottom-left-top{    
    position:absolute;
    right:0;


}
#bottom-left-bottom{
    position:absolute;
    bottom:0px;
    right:0;  
}

#bottom-right-top{
    position:absolute;    
    right:0; 
}

#bottom-right-bottom{
    position:absolute;
    bottom:0px;
    right:0;       
}

#bottom-center{
    position:absolute;
    margin: 0 0 0 12px;
    left:0;
    right:0;
}
#bottom-text-content{
    position:relative;
    display:block;    
    width:100%;
    text-align:center; 
    font-family: Semibold; 
    color: rgb(165,97,11); 
    font-size:300%;
    vertical-align: middle;
}
#content h3{
    display:none;
}

#content a:hover h3{
    color:#FFF;
    display:block;
    position: absolute;
    top:50%;
    margin-top: -25px;
    width:100%;       
    text-decoration: none;         
    font-family: ralewayregular;
    height:50px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    padding-top:25px;
    font-size: 200%;   
}
#container-content{
    position:relative;
     margin: 0 auto;
     width:100%;
     height:100%;         
     background-color:#FFF;
     min-height: 680px;
}

Answer 1

关键是确保#design-background的父具有位置相对值并设置为100％宽度。 Read this to learn how it works

重要属性：

#content {
    position:relative;
}
#all-content {
    width:980px;
    margin: 0 auto;
}

请在此处查看更新的演示 - http://jsfiddle.net/rrwjkb3g/

div宽度为内容的100％

1 个答案: