Backgrounds

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
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

Background Image

Utilities for controlling an element's background image.

none
gradient-to-t
gradient-to-tr
gradient-to-r
gradient-to-br
gradient-to-b
gradient-to-bl
gradient-to-l
gradient-to-tl
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      backgroundImage: theme => ({
        'hero-pattern': 'url(\'/img/hero-pattern.svg\')',
        'footer-texture': 'url(\'/img/footer-texture.png\')',
      }),
    },
  },
}

Background Gradient

Utilities for controlling background gradients.

Gradient From

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS

Gradient Via

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS

Gradient To

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS

Background Blend Mode

Utilities for controlling how an element's background image should blend with its background color.

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
CSS