How to Choose a Repeating Pattern for Web Backgrounds

A subtle repeating pattern can add texture to a website without competing with the content sitting on top of it. A loud one can tank readability, slow down page load, and look dated within a year. The difference usually comes down to a handful of decisions made before the pattern ever touches CSS.

Contrast: the background should lose, always

The single most common mistake is picking a pattern that's interesting enough to distract from the actual content. A background pattern should sit far enough back — in contrast, in scale, in color saturation — that a reader's eye never has to choose between it and your text. If you find yourself squinting to read body copy over a background, the pattern needs to be quieter, not the text bolder.

File size and format

A single small pattern tile, repeated via CSS, is dramatically lighter than a large background image — this is one of the rare cases where "seamless and tileable" is also the performance-friendly choice. A well-optimized PNG tile is typically under 200KB even at high resolution, and because it's repeated rather than stretched, you only pay that cost once regardless of screen size.

The CSS to actually tile it

Once you have a seamless tile, the implementation is simple:

body {
  background-image: url('pattern.png');
  background-repeat: repeat;
  background-size: 400px 400px; /* tune to taste */
}

The background-size value controls how large each tile renders — smaller values make the pattern feel denser and busier, larger values make it feel more like a subtle texture. For most background use cases, larger and quieter reads better than small and busy.

Accessibility considerations

• Contrast ratio still applies. Text over a patterned background needs to meet the same WCAG contrast requirements as text over a solid color — test against the pattern's lightest and darkest points, not just its average tone.
• Respect reduced-motion and reduced-transparency preferences if the pattern is animated or layered with opacity effects.
• Test with real content, not lorem ipsum — actual paragraph lengths and heading sizes interact with a background differently than placeholder text.

Where patterns work best on a site

Full-page backgrounds are the highest-risk placement. Patterns tend to work better in more contained areas: a hero section, a footer, a card background, or a section divider — places where the pattern can add character without fighting for attention across an entire page of reading.