Skip to main content

Background

Square only

Background utilities to easily change background sizing, color and position properties.

Cover, contain

<div class="bg-image bg-cover" style="background-image: url(../assets/images/photos/photo-01.jpg);"></div>
<div class="bg-image bg-contain" style="background-image: url(../assets/images/photos/photo-01.jpg);"></div>

Position

By default background images are positioned to the center, but you can change that by adding bg-position-[top, bottom, center]-[left, right, center] classes.

<div class="bg-image bg-cover bg-position-bottom-right" style="background-image: url(../assets/images/photos/photo-01.jpg);"></div>
<div class="bg-image bg-cover bg-position-top-left" style="background-image: url(../assets/images/photos/photo-01.jpg);"></div>

Jump to