How to add a carousel as background in bootstrap4?

I am building a simple website with bootstrap4 and I am trying to set a carousel as the background. Is there any simple way to do it without keyframes?

Solution

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>