Image
Utilities for controlling image and backround properties.
Responsive Image
Use img-full for a responsive image.
<img class="img-full height-20" src="/images/background.png" alt="background"/>
Background Position
Use bg-{property} to set intial position of background image.
For responsive variant use tracking-{breakpoint}-{property} like bg-sm-bottom.
| Class | Properties |
|---|---|
bg-bottom |
background-position: bottom; |
bg-center |
background-position: center; |
bg-left |
background-position: left; |
bg-left-bottom |
background-position: left bottom; |
bg-left-top |
background-position: left top; |
bg-right |
background-position: right; |
bg-right-bottom |
background-position: right bottom; |
bg-right-top |
background-position: right top; |
bg-top |
background-position: top; |
<div class="height-20 bg-center" style="background-image: url('/images/background.png')"></div>
Background Repeat
Use bg-{property} to control repetition of background image.
For responsive variant use bg-{breakpoint}-{property} like bg-sm-repeat.
| Class | Properties |
|---|---|
bg-repeat |
background-repeat: repeat; |
bg-no-repeat |
background-repeat: no-repeat; |
bg-repeat-x |
background-repeat: repeat-x; |
bg-repeat-y |
background-repeat: repeat-y; |
bg-repeat-round |
background-repeat: round; |
bg-repeat-space |
background-repeat: space; |
<div class="height-20 bg-no-repeat" style="background-image: url('/images/background.png')"></div>
Background Size
Use bg-{property} to control size of background’s element.
For responsive variant use bg-{breakpoint}-{property} like bg-sm-auto.
| Class | Properties |
|---|---|
bg-auto |
background-size: auto; |
bg-cover |
background-size: cover; |
bg-contain |
background-size: contain; |
<div class="height-20 bg-cover" style="background-image: url('/images/background.png')"></div>
Icon
icon utility allows to easily align and change size of svg with font-size property.
<span class="icon label-lg">
<i class="ri-notification-2-line"></i>
</span>