0

タイトルは私の問題全体を説明しています。ページにヘッダーがあり、余白が : に配置されています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;
}
4

1 に答える 1

1

CSS クラスに使用display:inline-blockします。.background

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

JS フィドルのデモ

于 2013-04-11T14:09:55.577 に答える