Unlike our Featured Panels, our Banner with Background component has a fixed height across device widths. The background image is placed using the :after pseudo-element, allowing an opacity to be present on the image. In this way, the background color set on the same element is visible behind the image — making it easy to experiment with the look and feel while prototyping various layouts.

Two classes create our banner with background element. Adding .banner-with-background will provide the basic setup, while adding an additional class for your image (details on how to do that below) will set the background image. In the following example, .oculus is the custom class we created for the image.

                                
                                    <div class="bg-primary banner-with-background oculus d-flex flex-column">

                                        <div class="container my-auto">
                                            <div class="narrow my-3">
                                                <h1 class="display-4 text-white">Header Text</h1>
                                            </div>
                                        </div>
                                        <!-- .container -->

                                    </div>
                                    <!-- .banner-with-background -->
                                
                            

While a shorter headline is recommended, the height of the Banner with Background component will adjust when the text wraps to multiple lines. This is particularly useful for languages that are physically wider than English, like German, Spanish, and French.

To vertically center the direct child of the .banner-with-background selector (in our above example, this would be .container), include .d-flex and .flex-column classes on .banner-with-background. The child selector can then be centered with the class .my-auto (auto margin top and bottom).

If .d-flex and .flex-column are not present, we can use .banner-with-background in a different way. For example, we could add it to a section with Bootstrap cards:

Add your own image classes

A custom mixin for applying background images can be found in scss/_e-custom-mixins.scss under B. Background image.

To create your own image classes, call the aforementioned mixin apply-background-image from the Banner with Background Sass in scss/_f-layout-elements.scss under G. Banner with background. Pass the image name without the extention. By default, the mixin uses '.jpg'.

                                
                                    &.oculus {
                                        &::before {
                                            @include apply-background-image( 'oculus' );
                                        }
                                    }
                                
                            

If you are using an svg, simply pass '.svg' as a second parameter. Add the class that you create to the .banner-with-background selector.

The Banner with Background component's height and image opacity can be customized in scss/_f-layout-elements.scss under G. Banner with background.