0

标题描述了我的整个问题。我的页面上有一个页眉，页边距位于 : margin: 20px 0;。这使得与内容的距离为 20 像素，与页面顶部的距离也是如此。唯一的问题是我的背景图片没有在 20 像素以下开始。如果我将边距更改为：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;
}
4

1 回答 1

1

用于display:inline-block您的.backgroundcss 类。

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

JS 小提琴演示

于 2013-04-11T14:09:55.577 回答