Background Attachment

@include('_partials.class-table', [ 'rows' => [ [ '.bg-fixed', 'background-attachment: fixed;', 'Fix the background image relative to the viewport.', ], [ '.bg-local', 'background-attachment: local;', 'Scroll the background image with the container and the viewport.', ], [ '.bg-scroll', 'background-attachment: scroll;', 'Scroll the background image with the viewport but not with the container.', ], ] ])

Fixed

Use .bg-fixed to fix the background image relative to the viewport.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Local

Use .bg-local to scroll the background image with the container and the viewport.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Scroll

Use .bg-scroll to scroll the background image with the viewport, but not with the container.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Responsive

To control the background attachment of an element at a specific breakpoint, add a {screen}: prefix to any existing background attachment utility. For example, use md:bg-fixed to apply the bg-fixed utility at only 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

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