Utilities for controlling the position of an element’s background image.
Tóm Tắt
Basic usage
Setting the background position
Use the bg-{side} utilities to control the position of an element’s background image.
bg-left-top
bg-top
bg-right-top
bg-left
bg-center
bg-right
bg-left-bottom
bg-bottom
bg-right-bottom
<
div class
=
"
bg-no-repeat bg-left-top
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-top
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-right-top
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-left
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-center
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-right
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-left-bottom
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-bottom
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
<
div class
=
"
bg-no-repeat bg-right-bottom
..."
style
=
"
background-image
:
url
(
...)
;
"
>
</
div>
Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover : bg-top to only apply the bg-top utility on hover .
<
div class
=
"
bg-center hover:bg-top
..."
style
=
"
background-image
:
url
(
...)
"
>
</
div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md: bg-top to apply the bg-top utility at only medium screen sizes and above.
<
div class
=
"
bg-center md:bg-top
..."
style
=
"
background-image
:
url
(
...)
"
>
</
div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Using custom values
Customizing your theme
By default, Tailwind provides nine background-position utilities. You change, add, or remove these by editing the theme.backgroundPosition section of your Tailwind config.
tailwind.config.js
module
.
exports
=
{
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'
,
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
Arbitrary values
If you need to use a one-off background-position value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<
div class
=
"
bg-[center_top_1rem]
"
>
</
div>
Learn more about arbitrary value support in the arbitrary values documentation.
