# Backgrounds
Visit https://tailwindcss.com/docs/background-attachment (opens new window) for more information
# Background Attachment
Class | Properties |
|---|---|
| bg-fixed | background-attachment: fixed; |
| bg-local | background-attachment: local; |
| bg-scroll | background-attachment: scroll; |
# Background Clip
Class | Properties |
|---|---|
| bg-clip-border | background-clip: border-box; |
| bg-clip-padding | background-clip: padding-box; |
| bg-clip-content | background-clip: content-box; |
| bg-clip-text | background-clip: text; |
# Background Opacity
Class | Properties |
|---|---|
| bg-opacity-0 | --tw-bg-opacity: 0; |
| bg-opacity-5 | --tw-bg-opacity: 0.05; |
| bg-opacity-10 | --tw-bg-opacity: 0.1; |
| bg-opacity-20 | --tw-bg-opacity: 0.2; |
| bg-opacity-25 | --tw-bg-opacity: 0.25; |
| bg-opacity-30 | --tw-bg-opacity: 0.3; |
| bg-opacity-40 | --tw-bg-opacity: 0.4; |
| bg-opacity-50 | --tw-bg-opacity: 0.5; |
| bg-opacity-60 | --tw-bg-opacity: 0.6; |
| bg-opacity-70 | --tw-bg-opacity: 0.7; |
| bg-opacity-75 | --tw-bg-opacity: 0.75; |
| bg-opacity-80 | --tw-bg-opacity: 0.8; |
| bg-opacity-90 | --tw-bg-opacity: 0.9; |
| bg-opacity-95 | --tw-bg-opacity: 0.95; |
| bg-opacity-100 | --tw-bg-opacity: 1; |
# Background Position
Class | Properties |
|---|---|
| bg-bottom | background-position: 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 Repeat
Class | Properties |
|---|---|
| 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; |
| bg-repeat-round | background-repeat: round; |
| bg-repeat-space | background-repeat: space; |
# Background Size
Class | Properties |
|---|---|
| bg-auto | background-size: auto; |
| bg-cover | background-size: cover; |
| bg-contain | background-size: contain; |
# Background Image
Class | Properties |
|---|---|
| bg-none | background-image: none; |
| bg-gradient-to-t | background-image: linear-gradient(to top, var(--tw-gradient-stops)); |
| bg-gradient-to-tr | background-image: linear-gradient(to top right, var(--tw-gradient-stops)); |
| bg-gradient-to-r | background-image: linear-gradient(to right, var(--tw-gradient-stops)); |
| bg-gradient-to-br | background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); |
| bg-gradient-to-b | background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); |
| bg-gradient-to-bl | background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); |
| bg-gradient-to-l | background-image: linear-gradient(to left, var(--tw-gradient-stops)); |
| bg-gradient-to-tl | background-image: linear-gradient(to top left, var(--tw-gradient-stops)); |