How to make image divide equally between two grids? - html

Question

How to make image between two grid dives? That image would be 50% on one and 50% on another?
<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

I think you should use z-index to keep the img below - not sure if will be necessary, set the body { background-color: gray } and set the margin of the main div with a negative value. I think this will work.
Try this: (I'm assuming you're using 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 */
}
See it working here! https://jsfiddle.net/hokumi/m7qoy7h3/