Use shorthand class .bg-auto, .bg-cover, .bg-contain
Background size can be responsive. Use .{breakpoint}-bg-{auto|cover|contain}
<!-- .bg-auto -->
<div class="bg-gray-light bg-no-repeat bg-c bg-auto" style="background-image:url(bg-1.jpeg);"></div>
<!-- .bg-cover -->
<div class="bg-gray-light bg-no-repeat bg-c bg-cover" style="background-image:url(bg-1.jpeg);"></div>
<!-- .bg-contain -->
<div class="bg-gray-light bg-no-repeat bg-c bg-contain" style="background-image:url(bg-1.jpeg);"></div>| Property | Class |
background-size: 0% 0%
|
.bg-0-0 |
background-size: 0% 100%
|
.bg-0-100 |
background-size: 100% 0%
|
.bg-100-0 |
background-size: 10% 100%
|
.bg-10-100 |
background-size: 100% 10%
|
.bg-100-10 |
background-size: 25% 100%
|
.bg-25-100 |
background-size: 100% 25%
|
.bg-100-25 |
background-size: 50% 100%
|
.bg-50-100 |
background-size: 100% 50%
|
.bg-100-50 |
background-size: 100% 100%
|
.bg-100-100 |