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.