I'm attempting to create a visually appealing layout by showcasing a Carousel component behind some text. The idea is to have scrolling and fading images with a prominent header overlaid on top of them. I want the carousel images to be contained within a specific section, rather than serving as the background for the entire page.
While researching, I came across this 2013 post. However, technology has evolved since then, and my attempts to adapt the code mentioned in the post have been unsuccessful. Even after adjusting the 'overflow: hidden' properties in Firefox debugger, I still can't get it to display correctly.
How can I go about displaying a series of carousel images behind text within a div using Bootstrap 5?
Edit: Below is the code snippet that I've modified from the linked Stack Overflow post.
<div class="col-xl-10 offset-xl-1 rounded">
<div id="titleCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="c-one"></div>
<div class="carousel-item" id="c-two"></div>
<div class="carousel-item" id="c-three"></div>
</div>
</div>
<div class="row">
<h1 class="text-center">Title Text</h1>
</div>
</div>
.carousel {
z-index: -99;
} /* ensures placement behind all content */
.carousel-item {
position: fixed;
width: 100%;
height: 100%;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
#c-one {
background: url(../images/front_2.jpg);
background-size: cover;
-moz-background-size: cover;
}
#c-two {
background: url(../images/front_3.jpg);
background-size: cover;
-moz-background-size: cover;
}
#c-three {
background: url(../images/front_4.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .active .left {
left: 0;
opacity: 0;
z-index: 2;
}