Currently in the process of constructing a website using HTML/CSS/Bootstrap/Js. I have encountered an issue while attempting to overlay a jumbotron on a container with a background image utilizing z-index.
Unfortunately, the background image I am using keeps getting cropped to display only the upper portion for some unknown reason.
I have experimented with adjusting the height attributes, but the dilemma arises as I desire it to remain responsive.
Below is my HTML code:
<div class="container-fluid mt-5" >
<div class="row imagez" >
<div class="col-12 px-0 mt-5 mb-5">
</div>
</div>
</div>
And here is my CSS code:
.imagez {
background-image: url("../flying.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
The ultimate goal is to achieve a container where the entire image is always displayed in full regardless of the browser's resolution.