The CSS background-repeat property controls whether a background image tiles across an element. Background images repeat by default, so a gradient or image smaller than its container can appear multiple times. section 6.3 section 6.6
Use no-repeat when the design should contain one background image:
- Set background-repeat: no-repeat; to stop the image from tiling. section 6.3
- Combine no-repeat with background-size and background-position when shaping a specific decorative area. section 6.6
- For a full-page background, give html and body a min-height of 100vh so the background fills the viewport without cutting off longer content. section 6.3
A single semicircle on a profile card
A radial gradient can form the card’s top decoration, while background-size: 1500px 500px and background-position: center -300px control its dimensions and placement. Adding background-repeat: no-repeat; leaves only one semicircle instead of tiled copies. section 6.6
Listing 6.8 Positioning the image
.card {
background-color: var(--card-background);
...
background-image: radial-gradient(
circle at top,
var(--primary) 50%,
transparent 50%,
transparent
);
background-size: 1500px 500px;
background-position: center -300px;
background-repeat: no-repeat;
}
Inspect the complete card rule showing background-image, background-size, background-position, and background-repeat working together. section 6.6
