ブートストラップ - フルスクリーンのヘッダーイメージとそれに続くバックグラウンドイメージ

Question

ブートストラップ時に新しく追加されました。ヘッダーイメージに従うために背景イメージを設定する際に問題が発生しています。

ヘッダーセクションにはフルスクリーンの背景があり、それにタイル張りの背景イメージが続いています。

私が試み、以下のスタイルシートと

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

<div class="main-body"> 
    <div class="container">...</div> 
    <div class="container">...</div> 
    ... 
</div> 

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

を：

.main-body { 
    text-align: center; 
    background: url(../img/setttings-bg-black.jpg) no-repeat center center; 
    background-size: 1024; 
    background-color: #000000; 
} 

.header { 
    text-align: center; 
    color: #000000; 
    background: url(../img/promo-bg.jpg) no-repeat center center; 
    background-size: cover; 
} 

問題が本体背景のトップは、ヘッダ本体の底部に隠れていることです。

私は間違っていますか？

Answer 1

はこのlinkまたはlink

はあなたのためのソリューションを持っていることを確認します。

問題1） 私が行ったことは、最初のdivの下に<img>を追加したことです（クラスintroのdivなので）。 imgのクラスはbgです。このCSSを追加するよりも

：

ここ

.bg{ 
    position:absolute; 
    z-index:-1; 
    width:100%; 
    height:100%; 
} 

あなたが作業フィドルを持っています。私は多くの<br>タグを追加してあなたの作品を見せてくれます。

背景画像height:100%とwidth:auto;を設定することもできます。これを行うと、一部の画面で画像が詰まることはありません。

問題2） 私はすべてのスライドをクラスslide1に割り当てました。また、すべてのスライドクラスposition:relative;に追加しました。タカ、このフィドルを見てください。

私はあなたの質問が今anwseredされていることを願っています。他に問題がある場合は、お気軽にお問い合わせください。