Backgrounds

Add background images or a skewed background in different colors.

Image background

Elegant theme built with Bootstrap

Add .bg-cover to include a responsive background image. Add a div inside with .bg-overlay and .bg-{color} to get a color overlay. Then you can change the opacity with .alpha-#.

        
            <div class="bg-cover d-flex align-items-center position-relative" style="background-image:
            url(assets/img/image.jpg)">
                <div class="bg-overlay bg-dark alpha-7"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 py-4">
                            <h1 class="display-4 text-white py-4 px-4">Elegant theme built with Bootstrap</h1>
                        </div>
                    </div>
                </div>
            </div>
        
    

Skew background

Add a div with the .bg-skew class to include a skew background in a page.

            
                <div class="bg-skew bg-skew-light">
                ..
                </div>
            
        

And set the background color using the color utilities.

            
                <div class="bg-skew bg-skew-primary text-white">
                ..
                </div>