上の詰め物があるCSSの背景が繰り返し表示される

詰め物/スペースを上に重ねたCSSの背景を追加するにはどうすればよいですか？上の詰め物があるCSSの背景が繰り返し表示される

ここは私のHTML構造です。

<div class="flare"> 
    <div class="clouds"> 
    <div class="clouds_bottom"> 

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

     <div class="content_body_wrapper"> 
      contents 
     </div> 

     <div class="footer"> 
      contents 
     </div> 

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

と私のCSSコードは動作しません。

.clouds_bottom { 
    background: url('../img/clouds_bottom_bg.png') repeat left 250px; 
}

出典

2012-04-19 Prakash

一番上または一番上にスペースがありますか？ –

私はちょうどバックグラウンドなしで上に250pxのスペースが必要ですが、私は体の上の詰め物を意味しません。 – Prakash

これはあなたのサイトの構造に依存しています使用されているクラスのhtmlを投稿できますか？ –

CSSでの不正使用は許可されています。代わりに、元の背景[色]を持つ別のdivでそれをカバーする上から100％離れた背景を配置する代わりに。

HTML：

<html> 
<body> 
    <div id="cheated_background"> 
    </div> 
    <div id="body"> 
     content 
    </div> 
</body> 
<html>

CSS：

body { 
    background: lightblue; /* your clouds :) */ 
} 
#cheated_background { 
    position: absolute; 
    top: 0px; 
    background: white; 
    width: 100%; 
    height: 100px; 
} 
#body { 
    position: relative; 
}

チェックアウトlive example。

出典

2012-04-19 22:19:06 seler

repeatの代わりにrepeat-xをお試しください。垂直に繰り返すと、背景位置によって作成されたマージンを見ることができなくなります。

コメントを編集：両方向で繰り返しが必要な場合は、私が考えることができるものは3層構造です。 position:relativeのコンテナdivが必要です。このコンバーターには、position:absoluteという3つのdivを入れることができます。下のものは繰り返しの背景画像を持ち、中央のものは白で下のものの上の部分のみを覆い、上のものは実際の内容を含みます。

出典

2012-04-19 21:05:55 Armatus

問題は、xとyの両方の位置で背景を繰り返す必要があることです。 – Prakash

上の詰め物があるCSSの背景が繰り返し表示される

答えて

関連する問題