Image Backgrounds

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.