Utilities
Background
File location:
sass/layout/helpers/_background.scss (GitHub)
Background Colors
| Class Name | Color | Comment |
|---|---|---|
.bg-white |
||
.bg-gray-lighter |
||
.bg-gray-light |
||
.bg-gray |
||
.bg-gray-dark |
||
.bg-gray-darker |
||
.bg-black |
||
.bg-light |
White default color, customizable | |
.bg-dark |
Black default color, customizable |
Background Size
| Class Name | CSS Property | Comment |
|---|---|---|
.bg-size-cover |
background-size: cover; | Responsively fill element with the background |
.bg-size-contain |
background-size: contain; | Background is fitted to the element so that it's always fully visible |
Background Attachment
| Class Name | CSS Property | Comment |
|---|---|---|
.bg-fixed |
background-attachment: fixed; | Background stays put relative to the viewport |
.bg-local |
background-attachment: local; | Background scrolls if the element content is scrollable. |
Background Position
| Class Name | CSS Property | Comment |
|---|---|---|
.bg-pos-top |
background-position: top; | |
.bg-pos-bottom |
background-position: bottom; | |
.bg-pos-right |
background-position: right; | |
.bg-pos-left |
background-position: left; | |
.bg-pos-center |
background-position: center; |
Background Repeat
| Class Name | CSS Property | Comment |
|---|---|---|
.bg-repeat-x |
background-repeat: repeat-x; | Repeats background image horizontally |
.bg-repeat-y |
background-repeat: repeat-y; | Repeats background image vertically |
.bg-repeat-space |
background-repeat: space; | Background repeated as many times as allowed by the element width/height |
.bg-repeat-round |
background-repeat: round; | Background repeated without gaps as many times as allowed by the element width/height |
.bg-repeat-none |
background-repeat: no-repeat; | Background is not repeated |
← Previous: Tables
Next: Lines & Borders →