How to Use Tailwind CSS for Background Attachment

Tailwind CSS is a utility-first CSS framework that provides a set of classes to help you design your website quickly and efficiently. One of the features that Tailwind offers is the ability to control the attachment of background images within your elements. In this article, we’ll explore how to use Tailwind CSS to manage background attachment, ensuring that your images behave exactly as you want them to on your website.

Understanding Background Attachment

Before diving into Tailwind’s classes, it’s important to understand what background attachment does. The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

There are three values that background-attachment can take:

  • scroll: The background scrolls along with the element.
  • fixed: The background is fixed with regard to the viewport.
  • local: The background scrolls along with the element’s contents.

Tailwind CSS Background Attachment Classes

Tailwind CSS provides utility classes for setting the background attachment of an element. These classes are named using the format bg-{attachment}, where {attachment} is one of the three values mentioned above.

Here’s how you can use them:


To make the background image scroll with the content, use the bg-scroll class:

<div class="bg-scroll bg-[url('/path/to/image.jpg')]">
  <!-- Your content here -->


To fix the background image to the viewport, use the bg-fixed class:

<div class="bg-fixed bg-[url('/path/to/image.jpg')]">
  <!-- Your content here -->


To make the background image scroll with the element’s content, use the bg-local class:

<div class="bg-local bg-[url('/path/to/image.jpg')]">
  <!-- Your content here -->

Combining with Other Background Utilities

Tailwind’s background attachment classes can be combined with other background utility classes for position, size, and repeat. This allows for fine-grained control over your background images.

For example, to create a fixed background image that covers the entire element and does not repeat:

<div class="bg-fixed bg-cover bg-no-repeat bg-[url('/path/to/image.jpg')]">
  <!-- Your content here -->

Responsive Background Attachment

Tailwind also allows you to apply different background attachments at different breakpoints. This is done using the {breakpoint}: prefix.

For example, to have a scrolling background on small screens and a fixed background on medium screens and up:

<div class="bg-scroll md:bg-fixed bg-[url('/path/to/image.jpg')]">
  <!-- Your content here -->

Customizing Background Attachment

If the default Tailwind classes don’t meet your needs, you can customize the background attachment utilities in your tailwind.config.js file. This can be useful if you want to add additional attachment styles or change the names of the existing classes.

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      backgroundAttachment: {
        'custom-attachment': 'value',
  // ...

Best Practices for Background Images

When using background images, it’s important to consider the performance and accessibility of your website. Here are some tips:

  • Use optimized images to reduce load times.
  • Consider the contrast between text and the background image to ensure readability.
  • Use appropriate alt text for background images added via img tags for accessibility.


Tailwind CSS makes it simple to control the attachment of background images, providing utility classes that can be combined with other background utilities for responsive and customized designs. By understanding how to use these classes, you can create visually appealing and functional backgrounds for your web elements.

For more information on Tailwind CSS and its utilities, visit the official Tailwind CSS documentation.

Remember to experiment with different background attachments and styles to find what works best for your project. Happy styling!

Related Tailwind CSS Background Utilities


What do you think?