背景全体をカバーするイメージでコンテナ内に書き込む

Question

私はこのコードをcodepenで作成しています。入れ子にしたコンテナを作成しました。完全な背景と完全に反応するイメージをロードしています。単純に別のコンテナを使用してテキストを書き込んで、このイメージのどこかに置くことができます。何が起こるかは、私が加えたものすべてがフルカバーイメージの下に来るということです。今私は背景画像を作成するためにCSSを使用することについて知っていますが、それらは本当に完全に反応しません。ネストされた列を使用する可能性があるかどうかを知りたい。 コードはここにある：http://codepen.io/spacepirate/pen/LNyxXM

<div class="row" style="padding-top:100px"> 
     <div class="col-xs-12"> 
     <img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive"> 

     <div class="row"> 
     <div class="col-xs-8 col-sm-6"> 
     Level 2: .col-xs-8 .col-sm-6 
     </div> 
    <div class="col-xs-4 col-sm-6"> 
    Level 2: .col-xs-4 .col-sm-6 
    </div> 
</div> 

Answer 1

あなたが言う：それで

書き込みテキストとあなたが置きたい場合は、このイメージ

上のどこかに置きますそれはあなたのテキストのためにposition:absolute;を使用し、あなたのイメージを今のように保ちます。

それとも、これを試してみてください。

<img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive" style="position:absolute;width:100%;">

DEMO

Answer 2

は、なぜあなたは、背景画像のタグを使用していませんか？

background-image：url（ "https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1"）;

Answer 3

は私が探していたものだ。この

HTML

<div class="row parent-block" style="padding-top:100px"> 
     <div class="col-xs-12 child-image-block"> 
     <img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive"> 
     </div> 
     <div class="row child-content-block"> 
      <div class="col-xs-8 col-sm-6"> 
      Level 2: .col-xs-8 .col-sm-6 
      </div> 
      <div class="col-xs-4 col-sm-6"> 
       Level 2: .col-xs-4 .col-sm-6 
      </div> 
     </div> 
</div> 

CSS

.parent-block { position:relative;} 
.child-image-block { position:absolute; left:0; right:0; top:0; bottom:0; width:100%; z-index:1;} 
.child-image-block img { width:100%;} 
.child-content-block {position:relative; z-index:3;}