Add background img to each boostrap carousel item-CodePudding

I'm trying to add a diferent background image to each item on my boostrap carousel

here is my HTML:

<!-- Start of carousel -->
    <div id="mainCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel"> <!-- Global carousel div -->
        <div class="carousel-indicators">  <!-- Bottom lines with the active marked out () -->
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>

        <div class="carousel-inner"> <!-- Div containing the carousel items -->
            <div class="carousel-item active"> <!-- Individual carousel item -->
                <div class="container">
                    <div class="carousel-caption text-start">
                        <h1>The leaders in...</h1>
                        <p>Fermentum netus tempor sed hendrerit sit est proin dictum duis! Luctus orci faucibus sagittis natoque metus libero conubia hendrerit!</p>
                        <p><a class="btn btn-lg btn-primary" href="#">See more</a></p>
                    </div>
                </div>
            </div>

            <div class="carousel-item"> <!-- Individual carousel item -->
                <div class="container"> 
                    <div class="carousel-caption">
                        <h1>Our journey</h1>
                        <p>Consequat pharetra porttitor et etiam condimentum amet. Metus fermentum eget porta ultrices magna convallis.</p>
                        <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
                    </div>
                </div>
            </div>

            <div class="carousel-item"> <!-- Individual carousel item -->
                <div class="container">
                    <div class="carousel-caption text-end">
                        <h1>See our offers</h1>
                        <p>Sapien bibendum dictum dis phasellus nullam nunc nibh lobortis. </p>
                        <p><a class="btn btn-lg btn-primary" href="#">Browse offers</a></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Button to previous item -->
        <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>

        <!-- Button to next item -->
        <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <!-- End of carousel -->

And here is my CSS:

.container{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 50px;
}

.carousel-item{
    height: 32rem;
    /*background-color: #777;*/
    color: white;
    position: relative;
}

I have tried a few things I have found on other answers to similar questions but none have worked for me. All I want is for each individual item to have a background image that covers the full width and height of the carousel

Can anyone help me?

Thank you in advanced!!

CodePudding user response：

<div class="carousel-item"> <!-- Individual carousel item -->
    <div class="container">
       <img src="..." alt="..." class="img-fluid"> <!-- Responsive Image -->
       <div class="carousel-caption text-end">
          <h1>See our offers</h1>
          <p>Sapien bibendum dictum dis phasellus nullam nunc nibh lobortis. 
          </p>
          <p><a class="btn btn-lg btn-primary" href="#">Browse offers</a> 
          </p>
      </div>
   </div>

Your code with just image added to the carousel-item.

There is a full code available on BootStrap documentation. Here is the link.