background-repeat

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jun 25, 2021Updated Nov 14, 2023
Contribute to Docs

Defines how the background image should be repeated if the image does not fully cover the element.

Syntax

Note: The default position will be in the top-left corner. It will repeat vertically and horizontally by default.

background-repeat: <value>;

Where <value> can be the following: no-repeat | repeat | repeat-x | repeat-y | space | round | initial | inherit

Example 1

Set background image to not repeat:

body {
background-image: url('ocean.png');
background-repeat: no-repeat;
}

A background image of an ocean that is not repeated

Example 2

Set star.gif to repeat along x-axis:

body {
background-image: url('star.gif'), url('space.png');
background-repeat: repeat-x, no-repeat;
}

Star gif repeated across the x-axis

Example 3

Evenly distribute star.gif from the end of element:

body {
background-image: url('star.gif'), url('night-sky.png');
background-repeat: space, no-repeat;
}

Star gif repeated evenly across x-axis without cropping

Example 4

Scale the star gif to fit the element:

body {
background-image: url('star.gif'), url('night-sky.png');
background-repeat: round, no-repeat;
}

Star gif stretched and repeated to fit element

All contributors

Looking to contribute?

Learn CSS on Codecademy