HTML本体の複数の背景画像を挿入します

Question

私はHTMLページの背景として3つの異なる画像を挿入しようとしています。私はページの背景として1つの画像を挿入する方法を知っていますが、背景を3つのグリッドに分割したいと思います。

基本的に、背景のために6つの単位（col-sm-6）の2つの列が必要です。最初の6つのユニットで、私は背景イメージを持っています。 6つのユニットの右側に、2つの異なる背景画像に収まるように、2つの等しいサイズにさらに分割したいと思います。これは私が達成したいものです。

は、どのように私はこれを行うについて行くことができますか？私はイメージが私のページの全長と幅をカバーするようにしたいと思います。

Answer 1

ここはシンプルなデモです。

HTML

<div class="row"> 
    <div class="col-sm-6 div1"> 
     " your content goes here" 
    </div> 
    <div class="col-sm-6"> 
     <div class="row"> 
      <div class="col-xs-12 div2"> 
       " your content goes here" 
      </div> 
      <div class="col-xs-12 div3"> 
       " your content goes here" 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.div1 { min-height:500px; background-image: url(https://images.unsplash.com/photo-1449960238630-7e720e630019?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;} 
.div2 { min-height:250px; background-image: url(https://images.unsplash.com/photo-1453227588063-bb302b62f50b?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;} 
.div3 { min-height:250px; background-image: url(https://images.unsplash.com/photo-1433878455169-4698e60005b1?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;} 

Answer 2

達成しようとしていることにアプローチする方法はいくつかあります。最初に頭に浮かんだのは、背景グリッドとフォアグラウンドのすべての2つのdivを持つことでした。

背景グリッドにはposition: fixedがあり、説明したように、ブートストラップを使用してグリッドをレイアウトします。

フォアグラウンドはposition: absolute; top: 0%;です。次に、すべてのページコンテンツをフォアグラウンドdivの内部に配置します。

これを設定する方法の例については、codepenをご覧ください。 http://codepen.io/smrubin/pen/yOzWrR

これは最善の方法ではないかもしれませんが、少なくとも正しい方向に着手すればよいでしょう。