ブートストラップ3.0を使用して静的なWebページを作成しようとしています。ブートストラップ3.0で複数の全幅バックグラウンド画像をスタック

このページは、基本的に物語であり、テキストや他の画像/要素が上に重なった背景画像を含む一連の積み重ねられたセクションで構成されています。

I've

ページがちょうど上から下へスクロールされるように設計されており、各セクションの背景画像は、水平方向の幅を記入すべきです。

その後、Skrollr（https://github.com/Prinzhorn/skrollr）を使用して画像に視差を追加します。

しかし、今は、ブートストラップでHTML/CSSを動作させるのに苦労しています。 #first要素がある - しかし、背景画像が表示されていない

#first { 
     background: url(img/1.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    }

：CSSで

<body> 
<div class="container"> 
    <section id="first"> 
     <div class="row annoucement col-md-4 col-md-offset-4"> 
      <h1>The story of...</h1> 
     </div> 
    </section 
    <section id="second"> 
     <div class="row gallery col-md-4 col-md-offset-4"> 
      <!-- Image gallery boxes --> 
     </div> 
    </section 
</div>

、その後：

は当初、私はこのような何かを考えていました1140ピクセルx 0ピクセルなので、画像は表示されません。

私は、正しくタイプタグを使用していないと思う - 上記のレイアウトをどのようにブートストラップで動作させることができますか？

出典

2013-09-07 victorhooi

グリッドシステムのマークアップが間違っています。文書からを参照する必要があります。基本的に.rowはコンテナ要素でなければなりません。バックグラウンドでページ全体をカバーしたい場合は、容器の内側に、これは私がお勧めしたいです：

<body> 
    <section id="first"> 
     <div class="container"> 
      <div class="row announcement"> 
       <div class="col-md-4 col-md-offset-4"> 
        <h1>The story of...</h1> 
       </div> 
      </div> 
     </div> 
    </section> 
    <section id="second"> 
     <div class="container"> 
      <div class="row gallery"> 
       <div class="col-md-4 col-md-offset-4"> 
        <!-- Image gallery boxes --> 
       </div> 
      </div> 
     </div> 
    </section> 
</body>

あなたのコンテンツに対して、より大きなスパンサイズを使用したいかもしれないが、私はCOL-MD-4が小さすぎるだろうと考えているため、それはあなたのためです決定する:)

出典

2013-09-07 09:00:55

クール、いいです、画像は今表示されている=）。背景画像のサイズではなく内側のエレメント（たとえば、

ストーリー...

）によって高さが設定されているため、画像の細い部分のみが表示されます。背景画像の完全な垂直方向の寸法を表示する方法はありますか？（しかし、まだ水平に合わせて調整してください）。 – victorhooi

セクションの高さをイメージの高さに設定しない限り、セクションの上部と下部に大きなサイズのパッドを設定してサイズを大きくすることはできません。 –

Aha、画像に合わせる方法があると思いました垂直にさて、#firstに 'width'または' padding-bottom'のいずれかを設定すると、完全な背景画像に収まるようになります。私はちょうど写真にそれを設定し、内部のものを心配する必要はありません - しかし、代わりに 'パディングボトム'を使うべきだと言っているので、 'width'はもっと簡単でしょう？ – victorhooi

ブートストラップ3.0で複数の全幅バックグラウンド画像をスタック

答えて

ストーリー...

関連する問題