Background

Background Attachment

Utilities for controlling how a background image behaves when scrolling.

fixed
local
scroll
CSS

Background Clip

Utilities for controlling the bounding box of an element's background.

border
padding
content
CSS
CSS

Background Color

Utilities for controlling an element's background color.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
Customizing
windi.config.js
export default {
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Background Opacity

Utilities for controlling the opacity of an element's background color.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      opacity: {
        light: '0.15',
      },
    },
  },
}

Background Position

Utilities for controlling the position of an element's background image.

bottom
center
left
left-bottom
left-top
right
right-bottom
right-top
top
CSS
Customizing
windi.config.js
export default {
  theme: {
    backgroundPosition: {
      'bottom': 'bottom',
      'bottom-4': 'center bottom 1rem',
      'center': 'center',
      'left': 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      'right': 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      'top': 'top',
      'top-4': 'center top 1rem',
    },
  },
}

Background Repeat

Utilities for controlling the repetition of an element's background image.

repeat
no-repeat
repeat-x
repeat-y
repeat-round
repeat-space
CSS

Background Size

Utilities for controlling the background size of an element's background image.

auto
cover
contain
CSS
Customizing
export default {
  theme: {
    backgroundSize: {
      'auto': 'auto',
      'cover': 'cover',
      'contain': 'contain',
      '50%': '50%',
      '16': '4rem',
    },
  },
}

Background Origin

Utilities for controlling the background origin of an element's background image.

border
padding
content
CSS