Background Repetition and Positioning in CSS - Place Images Precisely

After learning background-image, the next step is controlling how the image appears: does it repeat, where does it sit, and does it stay fixed while scrolling?

This lesson is for anyone looking for background-repeat in CSS, how to position a background image, or the difference between repeat and no-repeat.

What Is background-repeat in CSS?

The background-repeat property controls how a background image tiles inside an element. The default value in CSS is repeat.

Practical Example of background-repeat

.box {
    background-image: url("dot.png");
    background-repeat: no-repeat;
}

What does this code do? It shows the background image only once.

Line by line:

• background-image: defines the image.
• no-repeat: prevents tiling.

Expected result: one image inside the element.

Common mistake: forgetting no-repeat, which creates unwanted tiling.

What Is background-position in CSS?

The background-position property defines where the background image sits inside the element. You can use keywords or numeric values.

.hero {
    background-position: center center;
}

.card {
    background-position: right top;
}

What does this code do? It centers the image in .hero and places it top-right in .card.

Expected result: precise control over the most important part of the image.

Common mistake: ignoring background-position with cover, which crops the wrong area.

background-attachment in CSS

This property controls whether the background scrolls with the page or stays fixed.

• scroll (default): the background moves with the content.
• fixed: the background stays fixed while you scroll (simple parallax effect).

body {
    background-image: url("bg.jpg");
    background-attachment: fixed;
}

What does this code do? It fixes the background while content scrolls above it.

Common mistake: relying fully on fixed on mobile where support and performance can vary.

A Common Pro Background Combination

.section {
    background-image: url("hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Expected result: a balanced, non-repeating background that covers the element cleanly.

Common Mistakes with background-repeat and background-position

1) Unwanted default repetition: forgetting no-repeat.

2) Poor position choice: cropping an important part of the image.

3) Mixed values: invalid position values or wrong order.

FAQ - Common Search Questions

How do I stop a background image from repeating?

Use background-repeat: no-repeat;.

How do I position a background image in CSS?

Use background-position like center, right top, or numeric values.

What is the difference between repeat-x and repeat-y?

repeat-x repeats horizontally only, while repeat-y repeats vertically only.

Is background-attachment: fixed always good?

It can look great, but test on mobile because support and performance can vary.

Why is my background image repeating when I do not want it to?

Because the default value is repeat if you do not set anything else.