Backgrounds

Atomic classes for controlling the background properties of an element's background image.

Background Size

Background Size Classes

Class Output
.bg-auto background-size: auto;
.bg-cover background-size: cover;
.bg-contain background-size: contain;

Background Repeat

Background Repeat Classes

Class Output
.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 Position

Background Position Classes

Class Output
.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;

Background Position Examples

1
2
3
4
5
6
7
8
9
<div class="bg-no-repeat bg-bottom"></div>
<div class="bg-no-repeat bg-center"></div>
<div class="bg-no-repeat bg-left"></div>
<div class="bg-no-repeat bg-left-bottom"></div>
<div class="bg-no-repeat bg-left-top"></div>
<div class="bg-no-repeat bg-right"></div>
<div class="bg-no-repeat bg-right-bottom"></div>
<div class="bg-no-repeat bg-right-top"></div>
<div class="bg-no-repeat bg-top"></div>
.bg-bottom
.bg-center
.bg-left
.bg-left-bottom
.bg-left-top
.bg-right
.bg-right-bottom
.bg-right-top
.bg-top

Background Attachment

Background Attachment Classes

Class Output
.bg-fixed background-attachment: fixed;
.bg-local background-attachment: local;
.bg-scroll background-attachment: scroll;