To effectively accomplish this task, it is recommended to create a parent container with two direct children elements: one for displaying appropriately sized images using the picture element and another for block-level content (such as a div).
Here is a basic markup example that demonstrates this concept (try resizing your browser to see the effect):
* {
box-sizing: border-box;
max-width: 100%;
}
.splash {
height: 20em;
position: relative;
}
.splash img {
height: 100%;
object-fit: cover;
width: 100%;
}
@media (min-width: 40.1em) {
.splash {
height: 100vh;
overflow: hidden;
}
.splash > img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left; 0;
width: 100%;
}
.splash > .modal {
background-color: hsla(0,0%,0%,.2);
height: 100vh;
position: absolute;
top: 0;
left: 20%;
width: 30%;
}
}
<div class="splash">
<picture>
<img src="//unsplash.it/1600x900" />
</picture>
<div class="modal">
<p>Form goes here/</p>
</div>
</div>
While the mockup may seem simple at first glance, on larger viewports, the modal overlays the image element but not on smaller screens. It is advisable to customize and adjust the sizing based on your specific needs.
For loading images suitable for different screen sizes, consider adding more image sources within the picture element. Unfortunately, I am unable to provide further details as I have a meeting to attend. This framework-agnostic approach may not have a built-in solution in Bootstrap due to its less common nature, but feel free to explore other options.