How to put a div between two different backgrounds - html

Question

I want to put a div between two different backgrounds.
It looks something like below image:
As you can see, the div placed in between two background, white and blue.
How can I achieve this?

Answer 1

You can use position:absolute and a negative margin-top on the div you want in the middle
Check this

Answer 2

You can use below code by applying to that div. In this code you can use two different colors to background that you want.
background: linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -o-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -moz-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -webkit-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -ms-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
In above code do not remove any single line, because each line is for browser compatibility, each line code is for different browsers.

Answer 3

You can position your white div so that it stacks on top of the divs with blue and white background.
https://jsfiddle.net/z6ohochn/
#blue {
background: blue;
width:100%;
height:60px;
}
#white {
width:80%;a
height:50px;
background:white;
z-index:2;
position:relative;
top:-80px;
left:10%;
border-radius:5px;
}
#gray {
background: gray;
width:100%;
height:60px;
}