Background Image Holder

To update the background easily we have created a javascript function which will help you to update/ add background images directly from the HTML. It mean's you won't need to modify the CSS anymore.

oval

                                    <div class="position-relative">
                                        <div class="background-holder">
                                            <img src="img/hero-11-dark.png" alt="oval" class="background-image-holder">
                                        </div>
                                    </div>
                                
Additional Class Reference

.background-holder--cover
Apply to .background-holder to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
.background-holder--contain
Apply to .background-holder to resize the background image to make sure the image is fully visible
.background-holder--auto
Apply to .background-holder to see the image in original size
.background-holder--center
Apply to .background-holder to center the image of the container
.background-holder--bottom
Apply to .background-holder to set the image from the bottom of the element
.background-holder--left
Apply to .background-holder to set the image from the left of the element
.background-holder--top
Apply to .background-holder to set the image from the top of the element
.background-holder--left-top
Apply to .background-holder to set the image from the top left corner of the element
.background-holder--right-top
Apply to .background-holder to set the image from the top right corner of the element

Note: The default image postion is center and the background-size is cover