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