I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving any white spaces. I also want this layout to be responsive to the width of the view or parent div. How can I achieve this in a clean way?
Here is my HTML:
* {
padding: 0px;
margin: 0px;
}
#image {
max-width: 100%;
}
.rects {
height: 100px;
}
#rect-top {
background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
}
#rect-bottom {
background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75);
}<h1>Start</h1>
<div id="rect-top" class="rects"></div>
<img id="image" src="image-with-gradient.jpg">
<div id="rect-bottom" class="rects"></div>
<h1>End</h1>This is what I am aiming for:
https://i.sstatic.net/y9g7M.png
As shown in the example, there should be no white space before and after the h1 tags.