Bootstrap Carousel as Website Background

How to add a carousel as background in bootstrap4?

You can use bootstrap default carousel with some tweaks, namely the z-index and position attributes.

Image 1, 2 and 3 must be replaced by your own images, without them it will not work very well and the size adapted to your needs, you can also add indicators for the image and arrows cycle through images.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Carousel Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }

  #demo{
    position: absolute;
    z-index: -1;
  }

  #frontpage{
    color: red; 
    font-size: larger;
    background-color: yellow;
    opacity: 0.5;
    padding: 50px;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="Image1.jpg" alt="Image1" width="1920" height="1080">
    </div>
    <div class="carousel-item">
      <img src="Image2.jpg" alt="Image2" width="1920" height="1080">
    </div>
    <div class="carousel-item">
      <img src="Image3.jpg" alt="Image3" width="1920" height="1080">
    </div>
  </div>

</div>
<div id="frontpage">
My frontpage over the carousel
</div>

</body>
</html>

Displaying a Carousel as a background in a div in Bootstrap 5

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.

how to add background image to carousel in bootstrap

The style attributes you used should have worked, but it looks like you did a mess, anyway in order to achieve what you want you have to remove all the stuff and create one from scratch using getbootstrap.com carousel reference and the effect that you want will work by adding the below code.

<div class="carousel-item active" style="background-image: url('image/must.jpg'), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));">

There is also one more cool responsive carousel effect repository called Owl Carousel on github they also have included how to give different effects on carousel like: swipe drag right to left with continuous loop and it's fully customizable check it out, it's cool.

Background-image behind Carousel

Here you go , i hope this was what you needed ?

http://codepen.io/DasithKuruppu/pen/MyGZdd

Basically i changed

carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive,  .thumbnail a>img, .thumbnail>img {

        width: 80%;
        /* left: 50%; */
        margin-left: 10%;
        height: auto;
    }

^ This sets the inner image of carousel to a width of 80% of the container and sets a margin left of 10% which would mean it would be centered horizontally

And as for the background image i set it to cover instead of contain, cover stretches the background image to the far corners which may change the original aspect ratio of image unlike contain.

Carousel Background colour

Answer to original question: find

<rect width="100%" height="100%" fill="777"/>

and replace it with

<rect width="100%" height="100%" fill="white"/>

To set colour of buttons as per comment

button.carousel-control-prev,
button.carousel-control-next {
  background-color :white !important;
  color:black;
  opacity: 1;
}

.carousel-control-prev-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000' %3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000' %3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
 }