Prev Next

CSS Background Repeat

The background-repeat property controls if and how a background image repeats. By default, background images repeat both horizontally and vertically. Adjusting this can create patterns, or ensure a single image stays fixed in place without tiling.

Key Topics

No Repeat

To prevent the image from repeating, use background-repeat: no-repeat;. The image will only appear once.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>No Repeat Example</title>
    <style>
        body {
            background-image: url('icon.png');
            background-repeat: no-repeat;
            background-position: top left;
            background-color: #eee;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>No Repeat Background</h1>
    <p>The icon appears only once in the top-left corner.</p>
</body>
</html>

Explanation: With no-repeat, the image is displayed a single time. This is useful for logos or decorative elements that should not tile across the page.

Repeat Horizontally or Vertically

Use background-repeat: repeat-x; to repeat an image horizontally, or background-repeat: repeat-y; to repeat it vertically. This can create borders or stripes.

Creating Patterns

Repeating small images can create seamless patterns, adding a unique style to your site’s background.

Key Takeaways

  • No Repeat: Use no-repeat for single, non-tiled backgrounds.
  • Directional Repeats: repeat-x or repeat-y for tiled patterns along one axis.
  • Creative Patterns: Combine repeating backgrounds with positioning for custom designs.
Prev Next