Background Repeat & Position

Two properties control how and where a background image is placed within its container.

background-repeat

The default value is repeat, which tiles the image in both directions. Common alternatives: no-repeat, repeat-x, repeat-y, space (tiles with even spacing), and round (scales tiles to fit without gaps).

background-position

Sets the starting position of the image. Accepts keywords (top, center, bottom, left, right), percentages, or length values. Two values set horizontal then vertical: background-position: 20px top.

4-Value Syntax

The four-value syntax offsets from a specific edge: background-position: right 20px bottom 30px.

Example

/* Centred, non-repeating hero image */
.hero {
    background-image: url("/img/hero.webp");
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 60vh;
}

/* Repeating pattern tile */
.pattern {
    background-image: url("/img/dot.png");
    background-repeat: repeat;
    background-position: 0 0;
}

/* Logo pinned to bottom-right with offset */
.watermark {
    background-image: url("/img/logo.svg");
    background-repeat: no-repeat;
    background-position: right 16px bottom 16px;
}

/* Horizontally repeating divider */
.divider {
    background-image: url("/img/wave.svg");
    background-repeat: repeat-x;
    background-position: bottom center;
    height: 60px;
}

CSS

Full Editor

Pro Tip

For retina/HiDPI screens, provide a 2× image and set background-size to half its pixel dimensions — the image will render crisp without downloading unnecessarily large files on standard displays.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned