Background Repeat

CSS background-repeat is a property used to control how a background image is repeated within an HTML element's background area.

By default, background images are repeated both horizontally and vertically to cover the entire background area.

Here are the possible values for background-repeat:

• The repeat: This is the default value. The background image is repeated both horizontally and vertically, filling the background area with tiled images.
• The repeat-x: The background image is repeated only horizontally, creating a continuous pattern along the x-axis.
• The repeat-y: The background image is repeated only vertically, creating a continuous pattern along the y-axis.
• The no-repeat The background image is not repeated, and only a single instance of the image is displayed in the background area.

Examples

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-repeat: repeat;
}
        
    

In this example, the background image will be repeated both horizontally and vertically, creating a tiled pattern.

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-repeat: repeat-x;
}
        
    

Here, the background image will be repeated only horizontally along the x-axis, creating a continuous pattern horizontally.

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-repeat: repeat-y;
}
        
    

This will repeat the background image only vertically along the y-axis, creating a continuous pattern vertically.

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-repeat: no-repeat;
}
        
    

In this case, the background image will not be repeated, and only a single instance of the image will be displayed in the background.