Background Position

@include('_partials.class-table', [ 'rows' => [ [ '.bg-bottom', 'background-position: bottom;', 'Place the background image on the bottom edge.', ], [ '.bg-center', 'background-position: center;', 'Place the background image in the center.', ], [ '.bg-left', 'background-position: left;', 'Place the background image on the left edge.', ], [ '.bg-left-bottom', 'background-position: left bottom;', 'Place the background image on the left bottom edge.', ], [ '.bg-left-top', 'background-position: left top;', 'Place the background image on the left top edge.', ], [ '.bg-right', 'background-position: right;', 'Place the background image on the right edge.', ], [ '.bg-right-bottom', 'background-position: right bottom;', 'Place the background image on the right bottom edge.', ], [ '.bg-right-top', 'background-position: right top;', 'Place the background image on the right top edge.', ], [ '.bg-top', 'background-position: top;', 'Place the background image on the top edge.', ], ] ])

Usage

Use the .bg-{side} utilities to control the position of an element's background image.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Responsive

To control the position of an element's background image at a specific breakpoint, add a {screen}: prefix to any existing background position utility. For example, adding the class md:bg-top to an element would apply the bg-top utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

Customizing

Background Positions

By default Tailwind provides nine background-position utilities. You change, add, or remove these by editing the theme.backgroundPosition section of your Tailwind config.

@component('_partials.customized-config', ['key' => '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', @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'background position', 'property' => 'backgroundPosition', ], 'variants' => [ 'responsive', ], ])