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
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.