Background Utilities
# Attachment
The background attachment utility controls how a background images behaves on scroll.
| Class | Properties |
|---|---|
| --background-fixed | background-attachment: fixed; |
| --background-local | background-attachment: local; |
| --background-scroll | background-attachment: scroll; |
# Color
The background color utility controls the background color of an element and contains classes for each color variable along with primary, success, warning, danger, dark, and light. This utility also includes classes for focus and hover states. See colors.
| Class | State | Properties |
|---|---|---|
| --background-blue | background-color: @color[blue]; | |
| --background-primary | background-color: @color[blue]; | |
| --focus-background-primary | :focus | background-color: @color[blue]; |
| --hover-background-primary | :hover | background-color: @color[blue]; |
# Position
The background position utility controls the position of the element's background image.
| Class | Properties |
|---|---|
| --background-bottom | background-position: bottom; |
| --background-center | background-position: center; |
| --background-left | background-position: left; |
| --background-left | background-position: left; |
| --background-left-bottom | background-position: left bottom; |
| --background-left-top | background-position: left top; |
| --background-right | background-position: right; |
| --background-right-bottom | background-position: right bottom; |
| --background-right-top | background-position: right top; |
| --background-top | background-position: top; |
# Repeat
The background repeat utility controls the repetition of an element's background image.
| Class | Properties |
|---|---|
| --background-repeat | background-repeat: repeat; |
| --background-no-repeat | background-repeat: no-repeat; |
| --background-repeat-x | background-repeat: repeat-x; |
| --background-repeat-y | background-repeat: repeat-y; |
| --background-repeat-round | background-repeat: round; |
| --background-repeat-space | background-repeat: space; |
# Size
The background size utility controls the size of an element's background image.
| Class | Properties |
|---|---|
| --background-auto | background-size: auto; |
| --background-cover | background-size: cover; |
| --background-contain | background-size: contain; |