Introduction

If your app is built with web technologies, repeating a background image is controlled by CSS rather than by JavaScript. The key is to use a tileable image and combine background-image with the correct background-repeat and sizing rules.

The Core CSS Properties

Background repetition is driven mainly by these properties:

• 'background-image chooses the image'
• 'background-repeat controls whether it tiles horizontally, vertically, both, or not at all'
• 'background-size affects the tile dimensions'
• 'background-position controls where the tiling starts'

The default repeat mode is repeat, which tiles in both directions. A common problem is that the image itself is not designed to tile cleanly, so seams appear even though the CSS is correct.

Basic Repeating Background

Here is a minimal example for a full-screen app shell:

1<div class="app-shell">
2  <h1>Dashboard</h1>
3  <p>Content appears above a repeating pattern.</p>
4</div>

1.app-shell {
2  min-height: 100vh;
3  padding: 2rem;
4  background-image: url("/images/pattern.png");
5  background-repeat: repeat;
6  background-position: top left;
7}

This repeats the image across both axes for the entire viewport-height container.

Repeating in Only One Direction

If you want a texture band or stripe, use repeat-x or repeat-y.

1.header {
2  background-image: url("/images/stripe.png");
3  background-repeat: repeat-x;
4  background-position: top left;
5}

That repeats only along the horizontal axis. Vertical-only repetition works the same way with repeat-y.

Why background-size Matters

Sometimes developers add background-size: cover and then wonder why the image stops repeating. cover scales one large image to fill the element, which is usually the opposite of a tiled pattern.

For a repeated texture, either omit background-size or set an explicit tile size:

1.app-shell {
2  min-height: 100vh;
3  background-image: url("/images/dots.png");
4  background-repeat: repeat;
5  background-size: 48px 48px;
6}

That tells the browser to tile a 48 by 48 pixel pattern cell.

Making the Pattern Look Good

The image itself is as important as the CSS. A repeating background should be designed so the top edge joins the bottom edge cleanly and the left edge joins the right edge cleanly. If that is not true, seams will show even with perfect styling.

Keep the tile lightweight. Small PNG, SVG, or WebP assets work well for patterns because the browser can repeat them without downloading a huge texture.

Applying It to a Mobile-Web App Layout

In a single-page app, the background is often applied to the root container instead of individual components. That keeps scrolling and route transitions visually consistent.

1#root {
2  min-height: 100vh;
3  background-image: url("/images/paper-texture.png");
4  background-repeat: repeat;
5}

If a child component has its own solid background, it may cover the repeated pattern completely. In that case, the CSS is still working; the child layer is simply hiding it.

Common Pitfalls

Using a non-tileable image is the most common reason a repeated background looks broken.

Setting background-size: cover prevents the typical tiled effect because the browser scales one image instead of repeating pattern cells.

Applying the background to a small child element instead of the full app container limits where the pattern appears.

Large image files are unnecessary for repeated textures and can slow initial load time.

Opaque child backgrounds can hide the parent background and make it look like repetition failed.

Summary

• Use background-repeat to control image tiling in CSS.
• A tileable image is required for seamless repetition.
• Avoid background-size: cover when you want a repeated pattern.
• Apply the background to the correct container, often the app root or shell.
• Keep the asset small and designed for clean edge-to-edge tiling.