A guide to Tailwind CSS backgrounds.

Tailwind CSS provides a straightforward way to control how background images behave when a user scrolls. This often overlooked utility can add a significant touch of professionalism and interactivity to your web designs. Let’s dive into how you can use bg-fixed, bg-local, and bg-scroll to achieve various scrolling effects.

Background attachment: controlling scroll behavior

bg-fixed: keeping your background in place

The bg-fixed utility keeps a background image fixed in the viewport, meaning it won’t scroll with the rest of the content. This creates a parallax-like effect, where the foreground content moves over a static background. Perfect for hero sections or full-page background images.

<div
  class="bg-[url('...')] bg-fixed bg-cover bg-center h-screen"
>
  <div
    class="flex items-center justify-center h-full bg-black bg-opacity-50 text-white"
  >
    <h1 class="text-5xl font-bold">Explore the Wilderness</h1>
  </div>
</div>
<div class="p-8 bg-white">
  <p>Your portfolio content scrolls here...</p>
</div>

bg-local: scrolling with the element

When you use bg-local, the background image scrolls along with the element’s content. Useful for cards or containers with their own scrollable content.

<div class="overflow-y-auto h-96 p-4 border">
  <div
    class="bg-[url('...')] bg-local bg-cover p-8 mb-4 text-white"
  >
    <h2 class="text-3xl font-semibold">Scrollable Feature Card</h2>
    <p>Background moves with this card's content.</p>
  </div>
</div>

bg-scroll: standard scrolling (default)

The bg-scroll utility provides default behavior - the background scrolls with the page but stays fixed relative to the element.

<div class="bg-[url('...')] bg-scroll bg-cover h-64">
  <h1 class="text-4xl font-bold text-white">Standard Blog Header</h1>
</div>

Background images: adding visual impact

Using custom images

Apply any image using the arbitrary value syntax:

<div class="bg-[url('...')]">Content</div>

Built-in gradients

Tailwind includes ready-made gradient utilities:

<!-- Linear gradients -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Horizontal gradient
</div>

<div class="bg-gradient-to-br from-pink-400 via-red-500 to-yellow-500">
  Diagonal with three colors
</div>

<!-- Radial gradients -->
<div
  class="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-cyan-300 to-blue-600"
>
  Radial effect
</div>

Combining images with overlays

Layer gradients over images for better text readability:

<div class="relative bg-[url('...')] bg-cover h-96">
  <div
    class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"
  ></div>
  <div class="relative z-10 flex items-center justify-center h-full text-white">
    <h1 class="text-6xl font-bold">City Lights</h1>
  </div>
</div>

Background colors: quick styling

Solid colors

Use Tailwind’s color palette with opacity variants:

<!-- Solid colors -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-gray-100">Light gray background</div>

<!-- With opacity -->
<div class="bg-red-500/25">25% opacity red</div>
<div class="bg-black/50">50% opacity black overlay</div>

Status-based coloring

Perfect for notifications and alerts:

<div class="bg-green-50 border-l-4 border-green-400 p-4">
  <p class="text-green-800">Success message</p>
</div>

<div class="bg-amber-50 border-l-4 border-amber-400 p-4">
  <p class="text-amber-800">Warning notification</p>
</div>

Background clipping: creative text effects

Text clipping for gradient text

Make text reveal background gradients:

<h1
  class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"
>
  Gradient Text Effect
</h1>

Border vs padding vs content clipping

Control where backgrounds appear:

<!-- Background extends under border -->
<div
  class="bg-blue-200 bg-clip-border border-4 border-dashed border-blue-800 p-6"
>
  Border clipping
</div>

<!-- Background stops at padding -->
<div
  class="bg-green-200 bg-clip-padding border-4 border-dashed border-green-800 p-6"
>
  Padding clipping
</div>

<!-- Background only behind content -->
<div
  class="bg-red-200 bg-clip-content border-4 border-dashed border-red-800 p-6"
>
  Content clipping
</div>

Background positioning: precise placement

Basic positioning

Place images exactly where you want them:

<!-- Corner positions -->
<div class="bg-[url('...')] bg-top-left bg-no-repeat h-48">
  Logo in top-left corner
</div>

<div class="bg-[url('....')] bg-bottom-right bg-no-repeat h-48">
  Watermark in bottom-right
</div>

<!-- Center positioning -->
<div
  class="bg-[url('/img/avatar.jpg')] bg-center bg-no-repeat bg-cover w-32 h-32 rounded-full"
>
  Centered profile image
</div>

Custom positioning

Use arbitrary values for exact control:

<div class="bg-[url('...')] bg-[center_top_1rem] bg-no-repeat">
  Custom positioned pattern
</div>

Background repeat: tiling control

Repeat options

Control how background images tile:

<!-- Full tiling -->
<div class="bg-[url('...')] bg-repeat h-96">
  Repeats in all directions
</div>

<!-- Horizontal only -->
<div class="bg-[url('...')] bg-repeat-x h-24">
  Horizontal border pattern
</div>

<!-- Vertical only -->
<div class="bg-[url('...')] bg-repeat-y w-24 h-96">
  Vertical stripe pattern
</div>

<!-- Smart repeat options -->
<div class="bg-[url('...')] bg-repeat-round h-96">
  Stretches to avoid cutting tiles
</div>

<div class="bg-[url('...')] bg-repeat-space h-96">
  Adds space between tiles
</div>

Background size: scaling control

Sizing options

Control how background images scale:

<!-- Cover: fills container, may crop -->
<div class="bg-[url('...')] bg-cover h-64">
  Always fills container
</div>

<!-- Contain: fits entirely, may leave space -->
<div class="bg-[url('...')] bg-contain bg-no-repeat bg-center h-32">
  Shows complete image
</div>

<!-- Auto: natural size -->
<div class="bg-[url('...')] bg-auto bg-no-repeat bg-center h-24">
  Original dimensions
</div>

<!-- Custom sizing -->
<div class="bg-[url('...')] bg-[length:100px_50px] bg-repeat">
  100px wide, 50px tall tiles
</div>

Background origin: starting points

Origin control

Define where background positioning begins:

<!-- Starts from border edge -->
<div
  class="bg-[url('...')] bg-origin-border border-8 border-blue-500 p-8"
>
  Background includes border area
</div>

<!-- Starts from padding edge -->
<div
  class="bg-[url('...')] bg-origin-padding border-8 border-gray-400 p-8"
>
  Background starts at padding
</div>

<!-- Starts from content edge -->
<div
  class="bg-[url('...')] bg-origin-content border-8 border-red-400 p-8"
>
  Background only in content area
</div>

Practical combinations

Hero section with multiple effects

<section
  class="relative bg-[url('...')] bg-fixed bg-cover bg-center h-screen"
>
  <!-- Gradient overlay -->
  <div
    class="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/80"
  ></div>

  <!-- Content -->
  <div
    class="relative z-10 flex flex-col items-center justify-center h-full text-white text-center"
  >
    <h1
      class="text-7xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-white to-blue-200"
    >
      Adventure Awaits
    </h1>
    <p class="text-xl max-w-2xl bg-black/20 p-6 rounded-lg backdrop-blur-sm">
      Discover breathtaking landscapes with our guided tours
    </p>
  </div>
</section>

Card with subtle background pattern

<div
  class="bg-white bg-[url('...')] bg-[length:20px_20px] bg-repeat border rounded-lg p-6 shadow-lg"
>
  <h3 class="text-2xl font-semibold text-gray-800 mb-4">Premium Plan</h3>
  <p class="text-gray-600">Everything you need to grow your business</p>
</div>

Conclusion

Mastering Tailwind’s background utilities gives you precise control over visual elements. Mix and match these properties to create engaging, professional designs that enhance user experience. Start with simple combinations and gradually experiment with more complex layering effects.