Как сделать изображение поровну между двумя сетками?

Question

Как сделать изображение между двумя сеточными погружениями? Это изображение будет 50% на одном и 50% на другом?

<div class="row">
  <div class="col-lg-12">
  </div>
</div>
<div class="sec-div">
  <img class="img-fluid img-second "src="http://lorempixel.com/400/200/cats">
</div>
<div class="row">
  <div class="col-lg-12 second">
  </div>
</div>

Answer 1

Я думаю, вы должны использовать z-index, чтобы оставить img ниже - не уверен, если это будет необходимо, установите body { background-color: gray } и установите margin основного div с отрицательным значением. Я думаю, что это будет работать.

Попробуйте это: (я предполагаю, что вы используете Bootstrap)

HTML:

<div class="container-fluid" id="header"></div>
<div class="container second">
  <div class="col-lg-12 ">
  </div>
</div>

CSS:

 #header {
        padding: 2% 0% 5% 0%; /* you should control img height through here, as width will be viewport sized */
        background: url('images/pool.jpg');
        background-attachment: static;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0 /* try using this to set this div below the other */
    }

    .second {
       margin: /* negative value */
       z-index: /* bootstrap items have really high numbers, so I guess this won't be necessary */
    }

Посмотрите, как это работает здесь! https://jsfiddle.net/hokumi/m7qoy7h3/