Backgrounds

Use these classes to change a section's background style.

Attachment

bg--<attachment>

Class	Property & Value
`bg--fixed`	`background-attachment: fixed`
`bg--local`	`background-attachment: local`
`bg--scroll`	`background-attachment: scroll`

Applies a background color based on color pallette

bg--<color>

Class	Property & Value
`bg--none`	`background-color: none`
`bg--white`	`background-color: $white`
`bg--white-alpha`	`background-color: $white-alpha`
`bg--black`	`background-color: $black`
`bg--black-alpha`	`background-color: $black-alpha`
`bg--gray`	`background-color: $gray`
`bg--gray-50`	`background-color: $gray-50`
`bg--gray-100`	`background-color: $gray-100`
`bg--gray-200`	`background-color: $gray-200`
`bg--gray-300`	`background-color: $gray-300`
`bg--gray-400`	`background-color: $gray-400`
`bg--gray-500`	`background-color: $gray-500`
`bg--gray-600`	`background-color: $gray-600`
`bg--gray-700`	`background-color: $gray-700`
`bg--gray-800`	`background-color: $gray-800`
`bg--gray-900`	`background-color: $gray-900`
`bg--red`	`background-color: $red`
`bg--red-dark`	`background-color: $red-dark`
`bg--red-light`	`background-color: $red-light`
`bg--orange`	`background-color: $orange`
`bg--yellow`	`background-color: $yellow`
`bg--green`	`background-color: $green`
`bg--teal`	`background-color: $teal`
`bg--blue`	`background-color: $blue`
`bg--blue-dark`	`background-color: $blue-dark`
`bg--purple`	`background-color: $purple`
`bg--beige`	`background-color: $beige`

Applies background-size:cover and adds a black overlay at 0.7 opacity

bg--img

Add a background opacity to pseudo element

bgo--<value>

Position a background image

bg--<position>

Class	Property & Value
`bg--lt`	`background-position: left top`
`bg--l`	`background-position: left center`
`bg--lb`	`background-position: left bottom`
`bg--rt`	`background-position: right top`
`bg--r`	`background-position: right center`
`bg--rb`	`background-position: right bottom`
`bg--t`	`background-position: center top`
`bg--b`	`background-position: center bottom`

bg--<repeat>

bg--<size>