标题页边距切断我的背景图片

标题描述了我的整个问题。我的页面上标题为：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

标题页边距切断我的背景图片

回答

相关问题