• Jumbotron background image opacity – Bootstrap 4

    Bootstrap 4

    This code snippet will help you add a background image and change its opacity by adding a color gradient on top of the image. This technique leverages the ability to have multiple background image properties creating a layering effect.

  • Promotional Jumbotron

    Bootstrap 4

    This code snippet recreates the layout used on the Hotjar homepage. I was curious how they did the text highlighting and see they used a pseudo element with a transparent image. A pretty cool technique.

  • 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