Backgrounds

Background Position

Class
Property
bg-leftbackground-position: left;
bg-rightbackground-position: right;
bg-topbackground-position: top;
bg-bottombackground-position: bottom;
bg-centerbackground-position: center;
bg-left-topbackground-position: left-top;
bg-right-topbackground-position: right-top;
bg-left-bottombackground-position: left-bottom;
bg-right-bottombackground-position: right-bottom;

Background Repeat

Class
Property
bg-repeatbackground-repeat: repeat;
bg-no-repeatbackground-repeat: no-repeat;
bg-repeat-xbackground-repeat: repeat-x;
bg-repeat-ybackground-repeat: repeat-y;

Background Size

Class
Property
bg-coverbackground-size: cover;
bg-autobackground-size: auto;
bg-containbackground-size: contain;

Usage

<div
  class="bg-center bg-no-repeat bg-cover"
  style="background-image:
url('/src/assets/awesomebgimage.jpg;')"
></div>