增加2節

Question

相同的背景

我想添加IMG Logo

這IMG應該是本身延伸到的HTML代碼2個部分：

誰能幫助我如何實現這一目標？我知道如何插入背景和所有內容，但不知道如何設置背景以使其僅適用於這兩個部分。

<!--Seccion 2--> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <h1>1</h1> 
 
     <p>elige tu box</p> 
 
     <img class="crop-img" src="img/icono_elige.jpg" alt="delivery" /> 
 
     <p class="description"> 
 
     elije entre la <b>box mensual</b> o la <b>box personalizada</b> 
 
     </p> 
 

 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <h1>2</h1> 
 
     <p>elige tus snacks</p> 
 
     <img class="crop-img" src="img/icono_snacks.jpg" alt="elige" /> 
 
     <p class="description"> 
 
      encuentra mas de <b>80 snacks</b> y agregalos a tu box 
 
     </p> 
 

 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <h1>3</h1> 
 
      <p>pide y recibe</p> 
 
      <img class="crop-img" src="img/icono_delivery.png" alt=elige /> 
 
      <p class="description"> 
 
      para ti, para compartir o para regalar 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="row2"> 
 
     <button type="button2" name="button">Elige tu Box</button> 
 
     </div> 
 
     <hr></hr> 
 

 

 
     <!--Seccion 3--> 
 
     <section class="row"> 
 
     <div class="container"> 
 
      <div class="col-sm-3 col-sm-offset-1"> 
 
      <div style="margin: 100px 0 0 0;" class="visible-md-block  visible-lg-block"></div> 
 
      <p style="color:#00000;font-weight:600;">Encuentra mas de 7 categorias de snacks!</p> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div id="box"> 
 
       <img src="img/foto_categorias.jpg" width="20%" /> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </section>`

Answer 1

按照討論，我覺得你要買什麼是 -

.clsContainer { 
 
    background: url("http://i.stack.imgur.com/XE2v7.jpg") no-repeat 0 0 transparent; 
 
    width: 1100px; 
 
    height: 800px; 
 
} 
 
.one{ 
 
    height: 30%; 
 
    border:1px solid red; 
 
} 
 
.two{ 
 
    height: 30%; 
 
    border:1px solid green; 
 
} 
 
.three{ 
 
    height: 30%; 
 
    border:1px solid blue; 
 
}

<div class="clsContainer"> 
 
    <div class='one'>First Block</div> 
 
    <div class='two'>Second Block</div> 
 
    <div class='three'>Second Block</div> 
 
</div>

它不是一個完美的解決方案。但它會幫助你解決你的問題。

Answer 2

使這兩個區段的父母DIV，給圖像作爲父DIV的背景。

希望它能適合你。

Answer 3

包裝這兩個容器中的一個div

<div class="bg-frutas"> 
    //HTML here 
</div> 

然後在CSS

.bg-frutas { 
    background-image: url("img/fondo.png"); 
    background-position: left center; 
    background-repeat: no-repeat; 
    background-size: contain; //or cover, your choice 
} 

希望它幫助。

Answer 4

只是在你的container添加一個類（在我的選擇.parent）用於包裝所有的sections然後給它一個background-image，background-repeat: no-repeat;根據您的佈局。

.parent{ 
 
    background-image: url("http://i.stack.imgur.com/XE2v7.jpg"); 
 
    background-repeat: no-repeat; 
 
}

<!--Seccion 2--> 
 
<div class="container parent"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <h1>1</h1> 
 
     <p>elige tu box</p> 
 
     <img class="crop-img" src="img/icono_elige.jpg" alt="delivery" /> 
 
     <p class="description"> 
 
     elije entre la <b>box mensual</b> o la <b>box personalizada</b> 
 
     </p> 
 

 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <h1>2</h1> 
 
     <p>elige tus snacks</p> 
 
     <img class="crop-img" src="img/icono_snacks.jpg" alt="elige" /> 
 
     <p class="description"> 
 
      encuentra mas de <b>80 snacks</b> y agregalos a tu box 
 
     </p> 
 

 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <h1>3</h1> 
 
      <p>pide y recibe</p> 
 
      <img class="crop-img" src="img/icono_delivery.png" alt=elige /> 
 
      <p class="description"> 
 
      para ti, para compartir o para regalar 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="row2"> 
 
     <button type="button2" name="button">Elige tu Box</button> 
 
     </div> 
 
     <hr></hr> 
 

 

 
     <!--Seccion 3--> 
 
     <section class="row"> 
 
     <div class="container"> 
 
      <div class="col-sm-3 col-sm-offset-1"> 
 
      <div style="margin: 100px 0 0 0;" class="visible-md-block  visible-lg-block"></div> 
 
      <p style="color:#00000;font-weight:600;">Encuentra mas de 7 categorias de snacks!</p> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div id="box"> 
 
       <img src="img/foto_categorias.jpg" width="20%" /> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </section> 
 
</div>