Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email
Already have an account? Login

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 .imagebg class in conjunction with a child .background-image-holder element.

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 overlays for a better text readability experience.

background
“Styles come and go. Good design is a language, not a style.”
— Massimo Vignelli

Looking for styled image background sections?

View Cover Sections

or try the live builder ↗