標題頁邊距切斷我的背景圖片

標題描述了我的整個問題。我的頁面上標題爲：margin: 20px 0;。這使得與內容的距離爲20像素，並且與頁面頂部的距離也是如此。唯一的問題是我的背景圖像不能在20px以下開始。如果我將保證金更改爲：margin: 0 0 20px 0它解決了我最初的問題，但現在我的標題卡住了窗口頂部。任何幫助表示讚賞，我的代碼如下。標題頁邊距切斷我的背景圖片

HTML

<body> 
    <div class="background"> 
    <div class="inner"> 
    <header id="header" role="banner"> 
      <div class="headerbanner"> 

      </div> 
      <div class="clear"></div> 
    </header> 
    </div> 

     <div class="content contentBackground"> 
      <div class="contentForm"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

      </div> 
      <div class="sidebar"> 
      <div class="contentChat contentBlock"> 

      </div> 
      <div class="contentOnline contentBlock"> 

      </div> 
      <div class="contentTwitter contentBlock"> 

      </div> 
     </div> 
     </div>  
</body>

CSS

.clear{ 
    clear: both; 
} 
.inner{ 
    width:980px; 
    margin: 0 auto; 
} 
.background{ 
    background-image:url('THE_IMAGE_URL'); 
    background-color:grey; 
    background-attachment: scroll; 
} 
#header{ 
    height:120px; 
    margin: 20px 0; 
    background-color:green; 
    color:white; 
    font-size:70px; 
    text-align:center; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    border-radius:10px; 
    border: solid 5px #000; 
}

來源

2013-04-11 Marco Geertsma

使用display:inline-block您.background CSS類。

.background{ 
    background-image:url('THE_IMAGE_URL'); 
    background-color:grey; 
    display:inline-block; 
}

JS Fiddle Demo

來源

2013-04-11 14:09:55 Sachin

這樣做只是現在的頁面變得更小的方式解決保證金頂問題。我試着自己解決這個問題。 – 2013-04-11 14:11:51

你可以使用'width：100％'作爲'.background'類來使它在整個寬度上出現 – Sachin 2013-04-11 14:14:41

謝謝你幫助它正常工作。我必須等待2分鐘才能接受，但會接受此作爲最終答案。 – 2013-04-11 14:16:16

標題頁邊距切斷我的背景圖片

回答

相關問題