Web/ Design/ Vista

Resources for Designers & Developer

How to Make Full Screen Image Background Slider Using Bootstrap 4 Carousel

Bootstrap 4 carousel works with image tags inside divisions by default. In a recent project for a client i had to use the background images for the carousel. But after adding the background image paths to the carousel items in stylesheet images did not show up!

After a bit of digging i found out that the problem was with the height of the carousel items which are enclosed in a wrapper DIV which itself has zero height to start with!

So the solution was to increase height of parent DIV to 100% of viewport (which is the visible area of the web page) and also set height of items to 100%.

<div class="carousel-inner vh-100">
<div class="carousel-item h-100"></div>

vh-100 and h-100 are utility classes provided by Bootstrap 4

vh-100 is for 100% of viewport height and h-100 is for 100% height. You can find more about these utility classes for sizing here: https://getbootstrap.com/docs/4.3/utilities/sizing/

Next set the background size of carousel item to cover to make the background images fully responsive.

Full code for carousel looks like this after edits:
<div id="carouselExampleControls" class="carousel slide " data-ride="carousel">

	<div class="carousel-inner vh-100">

	     <div class="carousel-item h-100 active" style="background:url('images/sample1.jpg'); background-size:cover"></div>
<div class="carousel-item h-100" style="background:url('images/sample2.jpg'); background-size:cover"></div>
<div class="carousel-item h-100" style="background:url('images/sample3.jpg'); background-size:cover"></div>

	</div>

	<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
	   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	   <span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
	   <span class="carousel-control-next-icon" aria-hidden="true"></span>
	   <span class="sr-only">Next</span>
	</a>

</div>

Thats it! If you have any other method of achieving the same result let me know in the comments below.