• Jumbotron with Blurry Background Image

    Bootstrap 4

    In this example I demonstrate how you can add an img tag and the absolutely position it to the background. In order to make the text more readable, I made the image more subtly by decreasing the opacity and making it blurry. Making the image darker creates more contrast which in turn makes the text easier to read.

    In order for the .object-fit property to work in internet explorer you will need to add a polyfill to make it work.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>

  • Jumbotron Background Video with Image Fallback

    Bootstrap 4

    Want to add a video or image background to a Bootstrap Jumbotron? This code snippet adds an mp4 video and positions it behind the text in the .container to appear as a background video. To increase readability of the text, I changed the opacity of the video to make it darker than the original.

  • Bootstrap 3 Jumbotron Auto Viewport Height

    Bootstrap 3

    Extends the height of the jumbotron to fill the height of the viewport. As you scroll the remaining content of the page is shown. Commonly used for landing pages and blog post pages.

  • Transparent Background Image Cover Jumbotron Bootstrap 3

    Bootstrap 3

    This example sets the background image in the HTML instead of using a CSS background image. This approach lets you add your image with 100% saturation and you can control the level opacity with code. The alternative would be to add the transparency to your image using Photoshop.

Looking for something else?

Suggest or contribute a code snippet to be added to the library.

Other Code Snippet Categories