To ensure that the second div appears above the slide div, I applied position:absolute
to the second div. Since the first div is a slider, nesting the second div inside it was not feasible. How can this issue be resolved?
<div class="carousel slide">
<div class="carousel-inner" style="height:1000px">
<div class="item active">
<div class="fill" style="background-image:url(picture.jpg);"></div>
</div>
</div>
</div>
<div>some form.....</div>
CSS:
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Examples of how the images appear: Desktop Mobile
Issue resolved successfully!