1

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?

Nikos Hidalgo
  • 3,666
  • 9
  • 25
  • 39
pankan
  • 37
  • 5

1 Answers1

2

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>
anastaciu
  • 23,467
  • 7
  • 28
  • 53
  • thanks, it looks fine, but if I set the height=1000px of the frontpage then the box of the frontpage becomes bigger than the images in the carousel – pankan Feb 27 '20 at 16:41
  • @pankan, glad to help, you can adjust the sizes to your own accord. You can fiddle with the `carousel-inner img` widht and height, and adjust the image width and height aswell. – anastaciu Feb 27 '20 at 16:43
  • 1
    @pankan, you can do `.carousel-inner img { width: 1500px; height: 1000px; }`, for instance. You must now adjust it to your needs and maybe edit the images so that they are not deformed. – anastaciu Feb 27 '20 at 16:50
  • if i set in css what you proposed then images stop from being responsive – pankan Feb 27 '20 at 16:57
  • @pankan, that is odd, just tested it and works fine, make sure the stylesheet is properly linked and loaded, there are some threads here that list reasons for stylesheets not working like this one: https://stackoverflow.com/questions/6940904/complete-list-of-reasons-why-a-css-file-might-not-be-working – anastaciu Feb 27 '20 at 17:07
  • In any case, you can keep it as a style until you find out what the problem is. – anastaciu Feb 27 '20 at 17:08