Background Position & Attachment

Fine-tune background placement, repetition, attachment, and clipping.

4 min read Level 1/5 #tailwind#effects

What you'll learn

Use bg-center and bg-top plus arbitrary positions
Use bg-repeat-x and bg-no-repeat
Use bg-fixed and bg-clip-*

We set background images earlier. This lesson covers the placement controls that make those images sit exactly where you want.

Position

Position utilities decide which part of the image stays visible when it is cropped:

<div class="bg-[url(/hero.jpg)] bg-cover bg-top">Keeps the top in frame</div>
<div class="bg-[url(/hero.jpg)] bg-cover bg-[center_top_-1rem]">
  Arbitrary offset position
</div>

Repeat

For patterns and textures you usually want tiling; for hero images you usually do not:

<div class="bg-[url(/grid.svg)] bg-repeat">Tiled pattern</div>
<div class="bg-[url(/dots.svg)] bg-repeat-x">Tiles horizontally only</div>
<div class="bg-[url(/photo.jpg)] bg-no-repeat bg-cover">Single image</div>

Attachment and Clip

bg-fixed pins the background to the viewport for a subtle parallax hero. bg-clip-* controls how far the background extends — bg-clip-content keeps it inside the padding box:

<section class="bg-[url(/mountains.jpg)] bg-cover bg-fixed h-screen"></section>
<div class="bg-blue-500 p-6 bg-clip-content">Fill clipped to content box</div>

Outline & Accent →