Backgrounds

Atomic classes for managing an element’s background image properties.

Background size

Class	CSS
`.bg-auto`	`background-size: auto;`
`.bg-cover`	`background-size: cover;`
`.bg-contain`	`background-size: contain;`

Background repeat

Class	CSS
`.bg-repeat`	`background-repeat: repeat;`
`.bg-no-repeat`	`background-repeat: no-repeat;`
`.bg-repeat-x`	`background-repeat: repeat-x;`
`.bg-repeat-y`	`background-repeat: repeat-y;`

Background position

Class	CSS
`.bg-bottom`	`background-bottom: bottom;`
`.bg-center`	`background-position: center;`
`.bg-left`	`background-position: left;`
`.bg-left-bottom`	`background-position: left-bottom;`
`.bg-left-top`	`background-position: left-top;`
`.bg-right`	`background-position: right;`
`.bg-right-bottom`	`background-position: right-bottom;`
`.bg-right-top`	`background-position: right-top;`
`.bg-top`	`background-position: top;`

Background attachment

Class	CSS
`.bg-fixed`	`background-attachment: fixed;`
`.bg-local`	`background-attachment: local;`
`.bg-scroll`	`background-attachment: scroll;`

Background image and color

Class	CSS
`.bg-image-none`	`background-image: none;`
`.bg-transparent`	`background-color: transparent;`
`.bg-[color]`	`background-color: [color];`

Customization

Override background variables:

$backgrounds: (
  size: (auto, cover, contain),
  repeat: (repeat, no-repeat, repeat-x, repeat-y),
  position: (center, top, bottom, left, left-top, left-bottom, right, right-top, right-bottom),
  attachment: (fixed, local, scroll),
);