archcss ArchCSS

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 size
  • Values: cover, contain

# Background attachment

Use:

  • bg-{attach} - utility for background attachment
  • Values: 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.