CSS - background-repeat Property

Quiz

CSS background-repeat property controls the repetition of images on a background. The image can be repeated along the horizontal and vertical axes, or not repeated.

Syntax

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

Property Values

Value	Description
repeat	Background image repeated both horizontally and vertically. Default value.
repeat-x	Background image repeated horizontally.
repeat-y	Background image repeated vertically.
no repeat	Background image is not repeated.
space	The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
round	Background image repeated and either-pressed or strectched to fill spaces.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Repeat Property

Below are described examples of background-repeat property with different values.

Repetition of Image

To let the background image repeat both vertically and horizontally, we use the repeat value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .repeat {
            background-image: url('/css/images/tutimg.png');
            background-repeat: repeat;
            width: 800px;
            height: 400px;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-repeat property</h2>
    <div class="repeat"></div>
</body>

</html>

Horizontal Repetition of Image

To let the background image repeat both horizontally, we use the repeat-x value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .repeat-x {
            background-image: url('/css/images/tutimg.png');
            background-repeat: repeat-x;
            width: 800px;
            height: 300px;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-repeat property</h2>
    <div class="repeat-x"></div>
</body>

</html>

Vertical Repetition of Image

To let the background image repeat both vertitally, we use the repeat-y value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .repeat-y {
            background-image: url('/css/images/tutimg.png');
            background-repeat: repeat-y;
            width: 800px;
            height: 300px;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-repeat property</h2>
    <div class="repeat-y"></div>
</body>

</html>

Prevent Repetition of Image

To prevent the background image from repetition, we use the no repeat value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .no-repeat {
            background-image: url('/css/images/tutimg.png');
            background-repeat: no-repeat;
            width: 800px;
            height: 300px;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-repeat property</h2>
    <div class="no-repeat"></div>
</body>

</html>

Image Repetition with Space

To make the image repeat multiple times with space evenly distributed between them, we use the space value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .space {
            background-image: url('/css/images/tutimg.png');
            background-repeat: space;
            width: 800px;
            height: 300px;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-repeat property</h2>
    <div class="space"></div>
</body>

</html>

Stretch to fill Spaces

To make the images repeat multiple times and leave little space between them, we use round value. This is shown in the example below.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .round {
            background-image: url('/css/images/tutimg.png');
            background-repeat: round;
            width: 800px;
            height: 300px;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>CSS background-repeat property</h2>
    <div class="round"></div>
</body>

</html>

Supported Browsers

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page