1

I'm trying to display a Carousel component behind some text so that there are scrolling/fading images with a large header over the top. I'm trying to wrap all of this in a div so that the carousel images aren't the background for the entire page, only this title section.

I've found this post from 2013 but things have changed a lot. I've tried adapting it but it just doesn't show up at all, even after fiddling with overflow: hidden stuff in Firefox debugger.

How would I go about displaying a series of images (carousel) behind text, in a div, in Bootstrap 5?

Edit: here's the code I've adapted from the linked SO 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;
} /* keeps this 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;
}
maxresdefault
  • 13
  • 1
  • 5

1 Answers1

1

First of all, the fixed position in the .carousel-items broke the carousels for me as they had 0 height, so I commented that.

The answer is like the answer for here How do I position one image on top of another in HTML?

Basically, you parent container div <div class="col-xl-10 offset-xl-1 rounded"> should be set to position: relative;, as well as the .carousel, both with top and left set to 0.

Then you make your Title row position: absolute; also with top and left 0. That alone will work for what you want but will break bootstrap layout inside the Title row.

To fix it, also set it's right: 0 (found answer for that here Bootstrap container with position:absolute loses layout inside)

Also, I tested a link in place of the h1 in the title to see if it was clickable and it was, so the z-index is apparently working and you'll be able to put stuff in the title row without problems.

Giuliano Araújo
  • 126
  • 5
  • thank you! that's exactly the gap in my css knowledge I wanted to fill. – maxresdefault Jun 03 '21 at 07:42
  • Any thoughts on getting the background carousel to fit the text content? I'm messing with the height but because they're part of the same parent it doesn't want to shrink – maxresdefault Jun 03 '21 at 07:57
  • I've kind of figured out actually, if you set the height of the `carousel-inner` div to 100%, you can change the height of the `carousel` div to whatever you want. For example, `25vh` to take up 25% of the screen. It's not perfect so far but it's working – maxresdefault Jun 03 '21 at 08:18