How to set up a Carousel as the background within a div using Bootstrap 5

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;
}

Answer №1

Initially, the fixed positioning within the .carousel-item elements caused issues with the carousels as they had a height of 0, so I addressed that problem.

This solution resembles the one provided in this post How can I overlay one image on top of another using HTML?

In essence, your parent container div

<div class="col-xl-10 offset-xl-1 rounded">
needs to have a style of position: relative;, along with the .carousel, both with their top and left properties set to 0.

Next, you should apply position: absolute; to your Title row, also setting the top and left positions to 0. This setup will achieve the desired outcome but might affect the bootstrap layout inside the Title row.

To resolve this issue, add right: 0 (details on this can be found in this post Bootstrap container with position:absolute disrupts internal layout)

I conducted a test by replacing the h1 with a link in the title to verify its clickability, which worked fine. Therefore, it seems that the z-index is functional, allowing you to populate the title row without complications.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a dynamic animation effect for the placeholder in an input field that triggers when the user starts typing

Have you ever come across interactive demos like this one? I've noticed that most examples involve creating a new element. parent().append("<span>" + $input.attr('placeholder') + "</span>"); Is there a way to make the placehol ...

Choose the div element that is immediately before the current div

Attempting to create a harmonica effect by adjusting the height of divs upon hovering over another. The HTML is structured as follows: <html><body> <div class="section1"></div> <div class="section2"></div> <di ...

Calculating the percentage difference between two dates to accurately represent timeline chart bar data

I am in the process of creating a unique horizontal timeline chart that visually represents the time span of milestones based on their start and finish dates. Each bar on the timeline corresponds to a milestone, and each rectangle behind the bars signifies ...

A guide to efficiently filling multiple rows of images with different heights while preserving their aspect ratio

I am facing a design challenge that I believe can be solved using CSS, although it might require some Javascript. My issue involves a gallery of images with varying sizes and proportions. I would like to achieve the following: Distribute the images in m ...

Adding text and buttons to the initial image in the slider: a step-by-step guide

I'm facing an issue with my html image slider as I try to add buttons and text to the first image but it keeps getting overridden. <div id="captioned-gallery"> <figure class="slider"> <figure> & ...

Tips for displaying multiple rows horizontallyALLOWING multiple rows to appear horizontally can be achieved by

This is a demonstration of my desired outcome https://i.sstatic.net/UErvL.png However, I am currently only able to show one product per row. I have attempted the following approach, but it is not functioning as expected. <ol> <?php $no = 1; ...

Verify the presence of a specific select option using text in jQuery version 1.7

Looking at the following snippet of HTML: <select id="sel"> <option value="0">Option1</option> <option value="1">Option2</option> <option value="2">Option3</option> <option value="3">Option4</option> & ...

Create a React MUI component that allows menu items to become sticky when selected

Is there a way to make the mui MenuItem stay sticky to Select while scrolling down? To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx Simply click on the select and start scrolling ...

Is it possible for browsers to handle PUT requests using multipart/form data?

Is it common for HTML forms to not support HTTP PUT requests when submitted from certain browsers like Google Chrome? <form id="#main-form" action="http://localhost:8080/resource/1" method="put" enctype=" ...

What could be causing the constant issue of receiving an empty $_FILE when attempting to upload a file using ajax and php

I am currently utilizing ajax to send form data and upload files from the client to the server (php). An issue arises when attempting to access the file content on the server side - for reasons unclear, the $_FILES variable appears empty regardless of my ...

Can the jQuery live function be triggered without the need for an event?

Using the live function in jQuery requires an event to trigger it. More information can be found in the official API documentation. $(".xyz").live('event', function(){ }); I am trying to make the above function run as soon as the dynamicall ...

Complex UL structure with nested LI items and both column and inline styling

I'm facing a challenge that seems insurmountable - I can't even begin to tackle it, so I don't have a polished solution to present. All I have is the source code and my goal. My task is to create a three-level UL structure. The top level sh ...

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

Change the absolute positioning of a div element to be applied globally

When trying to get the position of an element using jQuery's .offset(), I then set the div to have a position:absolute; and adjust its left and top based on the information obtained from offset(). This method works well when all the element's pa ...

Is there a way to automatically resize the images on my navbar as the screen size decreases?

Is there a way to make the images in my navbar resize automatically so they remain next to each other instead of stacking on top of one another, especially when viewed on a mobile device where the navbar takes up a significant portion of the screen? Below ...

Having trouble making my if / else statement show the_header_image_tag on WordPress

Having some trouble getting my if / else statement to function correctly. I am using a WordPress function called '' and I want to apply different CSS styles based on whether it is used or not. My theme allows for the display of a banner, but onl ...

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings. Currently, I h ...

Significant empty space to the left of content due to Zurb Foundation

I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons. However, I am facing a significant gap on the left side of my content, causing the rig ...

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Can anyone assist with solving an issue I am facing with a timer and a pause button? I need the pause button to be disabled once clicked, until a popup appears, then it should become enabled again. My code snippet is provided below: HTML: <button md-i ...

Using canvas transformation changes the way drawImage is applied

I have been working on a game as a hobby and you can find it at . I have managed to get most aspects of the game working well, such as transformation, selection, movement, and objects. However, there is one particular challenge that I am struggling with. ...