How to place 'Background Image over another div'? - html

Question

This question maybe not cool but want to know proper way to solve this task. Of course using HTML,CSS,Bootstrap.
Something like this:

Answer 1

Use CSS transform:
.cover {
background: blue;
height: 100px
}
.block {
transform: translate(0, -65px);
padding: 0 20px;
}
.text {
background: red;
height: 150px;
}
<div class="cover"></div>
<div class="block">
<div class="text">Hello, "Background Image over another div"</div>
</div>

Answer 2

Quick example, use negative margin top to place section over other section, replace styles with background image if you wish.
<section style="background:red;width:100%;height:300px">
</section>
<section style="width:100%;margin-top:-150px">
<div class="container">
<div style="width:100%;height:300px; background: white;"></div>
</div>
</section>

Answer 3

This should do what you want. https://codepen.io/anon/pen/KevYXE
Basically I created a DIV overlay and a background DIV. The background DIV is split into two sections. The top section uses a background image and the bottom section is a solid color. I used a relative position for the overlay and used percentages to make sure everything stays center.
HTML
<div id="wrap">
<div id="bg-overlay"></div>
<div id="bg-wrap">
<div id="bg-top"></div>
<div id="bg-bottom"></div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 600px;
background: #ccc;
margin: 0 auto;
position: relative;
left: 0;
right: 0;
}
#bg-overlay {
position: absolute;
height: 70%;
max-width: 800px;
width: 80%;
top: 15%;
background: #fff;
left: 0;
right: 0;
margin: 0 auto;
-webkit-box-shadow: 0 6px 6px -6px #666;
-moz-box-shadow: 0 6px 6px -6px #666;
box-shadow: 0 6px 6px -6px #666;
}
#bg-wrap {
width: 100%;
height: 100%;
}
#bg-top {
height: 50%;
width: 100%;
float: left;
background: url("https://picsum.photos/2200/300") no-repeat;
background-position: center center;
}
#bg-bottom {
height: 50%;
width: 100%;
float: left;
background: #cccccc;
}