CODEWITHSUNDEEP
htmlcssweb
Sung
Sung

Reputation: 434

Adding same background for 2 sections

I'm trying to add an IMG Logo

This IMG is supposed to extend itself into 2 sections of HTML code:

Can anyone help me on how to achieve this? I know how to insert a background and everything but not sure how it needs to be set for it to only work in these 2 sections.

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

Upvotes: 2

Views: 2370

Answers (4)

Lekz Flores
Lekz Flores

Reputation: 416

Just add a class (.parent in my choice) in your containerthat wraps all your sectionsThen give it a background-image, background-repeat: no-repeat; depending on your layout.

.parent{
    background-image: url("https://i.sstatic.net/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>

Upvotes: 0

Shandy Ardiansyah
Shandy Ardiansyah

Reputation: 132

Wrap these two containers in a div

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

then on the CSS

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

hope it helps.

Upvotes: 0

PHPExpert
PHPExpert

Reputation: 943

As per discuss, I think what are you looking is-

.clsContainer {
  background: url("https://i.sstatic.net/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>

Its not a perfect solution. But it will help you to resolve your issue.

Upvotes: 1

Shivam Tyagi
Shivam Tyagi

Reputation: 168

Make a parent div of both the sections and give the image as an background of that parent div.

Hopefully, it'll works for you.

Upvotes: 0

Related Questions