CSS background-repeat property

The background-repeat CSS property is used to set how the background images are repeated. The default value will be repeat.

CSS background-repeat property

The background-repeat CSS property is used to set how the background images are repeated.

Syntax

background-repeat:repeat|repeat-x|repeat-y|space|round|no-repeat;

Values

ValueDescription
repeatThe background image is repeated horizontally and vertically. The last image will be clipped if it doesn't fit.
repeat-xThe background image repeated horizontally (x axis).
repeat-yThe background image repeated vertically (y-axis).
no-repeatThe image is not repeated.
spaceThe image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and white-spaceis distributed evenly between the images.
roundAs the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added.
inheritThe property is inherited from the parent element.

Example – repeat

<!DOCTYPE html>
<html>
<head>
    <title>CSS background size</title>
    <style>
        body{
            background-image: url('logo.png');
            background-repeat: repeat;
        }
    </style>
</head>
<body>
</body>
</html>

Output

Example - repeat-x

<style>
    body{
        background-image: url('logo.png');
        background-repeat: repeat-x;
    }
</style>

Output

Example - repeat-y

<style>
    body{
        background-image: url('logo.png');
        background-repeat: repeat-y;
    }
</style>

Output

Example - no-repeat

<style>
    body{
        background-image: url('logo.png');
        background-repeat: no-repeat;
    }
</style>

Output

Example - space

<style>
    body{
        background-image: url('logo.png');
        background-repeat: round;
    }
</style>

Output

Learn about the shorthand CSS background property.


Share Tweet Send
0 Comments
Loading...