Backgrounds
Background Position
bg-left | background-position: left; |
bg-right | background-position: right; |
bg-top | background-position: top; |
bg-bottom | background-position: bottom; |
bg-center | background-position: center; |
bg-left-top | background-position: left-top; |
bg-right-top | background-position: right-top; |
bg-left-bottom | background-position: left-bottom; |
bg-right-bottom | background-position: right-bottom; |
Background Repeat
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; |
Background Size
bg-cover | background-size: cover; |
bg-auto | background-size: auto; |
bg-contain | background-size: contain; |
Usage
<div
class="bg-center bg-no-repeat bg-cover"
style="background-image:
url('/src/assets/awesomebgimage.jpg;')"
></div>