Utilities › Background
Background
Utility collection allow you to customize the background appearance of an elements
# Background color.
Use:
bg-{color}
- utility for background color.bg-{color}-alpha-{opacity}
- utility for background color opacity.bg-{color_1}-{color_2}
- utility for gradient.
# Background size
Use:
bg-{size}
- utility for background sizeValues
: cover, contain
# Background attachment
Use:
bg-{attach}
- utility for background attachmentValues
: fixed, scroll
# Background repeat
Use:
bg-repeat
- utility for background repeat.bg-repeat-{axis}
- utility for background repeat on axis..bg-no-repeat
: class for no repeat background.
# Background position
Use:
bg-{side}
- utility for background position.
Where sides is one of:
top
- set background position to top.right
- set background position to right.bottom
- set background position to bottom.left
- set background position to left.top-left
- set background position to top-left angle.bottom-left
- set background position to bottom-left angle.top-left
- set background position to top-left angle.top-right
- set background position to top-right angle.top-center
- set background position to center.