Image Backgrounds
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Adding a background
Add a covering image background to elements by using the .imagebgclass in conjunction with a child .background-image-holderelement.
The background image holder uses the CSS property 'background-size: cover' to ensure that the background is fitted to the parent element without stretching or skewing the image.
<div class="imagebg"> <div class="background-image-holder"> <img alt="background" src="img/my-image.jpg" /> </div> <div class="container"> content </div></div>
Tip:Use image backgrounds in conjunction with scrims and overlaysfor a better text readability experience.
“Styles come and go. Good design is a language, not a style.”— Massimo Vignelli