下の2行に背景を表示するにはどうすればいいですか？

Question

私のコンテナには3つの行があります。下の2つの行に1つの背景を適用したいと思います。私は第1列の背景を望んでいません。私は1つのバックグラウンドACを使用したいと思います。私は何か不足していることを知っていますが、コードをどこで編集するのか分かりません。私の背景は列の最初の行にのみ表示されます。

バックグラウンドが必要な各.rowにクラスを適用したくありません。ポイントはバックグラウンドを一度指定して、2つの下の行に適用させることです。ここで

は私のbootplyです： http://www.bootply.com/X5WsoQbuM1

は、ここに私のHTMLです：

<div class="content-section-d"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <h2>How many apples can you eat?</h2> 
       <p> 
        The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple. I.</p> 
     </div> 
    </div> 
     <h2>Join us to pick the apples:</h2> 
      <div class="row centered-text" id="backgroundazul"> 
      <div class="col-md-4 col-xs-12"> 
       <h3>4,000,000+</h3> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>1,500,000+</h3> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>150,000+</h3> 
      </div> 
       </div> 
      <div class="row"> 
      <div class="col-md-4 col-xs-12"> 
       <h3>68,000+</h3> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>2,000+</h3> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>3 years</h3> 
      </div> 
       </div> 

       </div> 
    <!-- /.container --> 

は、ここに私のCSSです：

#backgroundazul { 
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center; 
padding: 0 0 50px 0; 

}

Answer 1

あなたはすべての行の背景には、クラスを繰り返し行を使用したい場合は

/* CSS used here will be applied after bootstrap.css */ 

.backgroundazul { 
    background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center; 
    padding: 0 0 50px 0; 
} 


    <div class="container"> 

      <div class="row"> 
       <h2>Join us to access:</h2> 
      </div> 
      <div class="row centered-text backgroundazul " > 
       <hr class="section-heading-spacer"> 
      <div class="col-md-4 col-xs-12"> 
       <h3>4,000,000+</h3> 
       <p>Apples</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>1,500,000+</h3> 
       <p>Oranges</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>150,000+</h3> 
       <p>Mangos</p> 
      </div> 
      </div> 
      <div class="row centered-text backgroundazul " > 
      <div class="col-md-4 col-xs-12"> 
       <h3>68,000+</h3> 
       <p>Bananas</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>2,000+</h3> 
       <p>Honeydew</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>3 years</h3> 
       <p>Blueberries</p> 
      </div> 
       </div> 

Answer 2

id.containerあなたに要素を適用し、その後.row要素に背景を適用します。 Bootplyを更新しました

<div id="backgroundazul" class="container"> 
    <div class="row"> 
     <!-- ... --> 
    </div> 
    <div class="row"> 
     <!-- ... --> 
    </div> 
</div> 

#backgroundazul .row { 
    background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center; 
    padding: 0 0 50px 0; 
} 

。 .rowに2行目のデータをラップしなかったため、バックグラウンドは適用されません。これが意図的かどうかはわかりません。

Answer 3

解決策は単純です - あなたは自分のCSSコード内の単一の行を挿入する必要があり、そのコードは次のようになります。

#backgroundazul{ 
 
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center; 
 
background-size: cover; 
 
padding: 0 0 50px 0; 
 
}

そして、それはそれです： - ）