Question

我正在尝试添加IMG Logo

这个IMG应该扩展为HTML代码的两个部分：

任何人都可以帮我解决这个问题吗？我知道如何插入背景和所有内容但不确定如何设置它只能在这两个部分中工作。

<!--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

只需在.parent中添加一个类container，然后将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>

为2个部分添加相同的背景

4 个答案: