Background Repeat Property in CSS

• The "background-repeat" property in CSS is used to control how a background image is repeated or displayed when it is smaller than the element it is applied to. It allows you to specify whether the background image should repeat horizontally, vertically, both, or not at all. Here's the basic syntax:

    selector {

        background-repeat: value;

    }

• In the example above, "selector" represents the CSS selector that targets the element you want to apply the background repeat property to. "value" is a placeholder that should be replaced with one of the following options:

• "repeat" (default): The background image is repeated both horizontally and vertically to fill the entire background area.

• "repeat-x": The background image is repeated only horizontally, filling the background area along the x-axis.

• "repeat-y": The background image is repeated only vertically, filling the background area along the y-axis.

• "no-repeat": The background image is not repeated and displayed only once in the background area.

• "space": The background image is repeated as many times as possible without clipping, and the spacing between the images is distributed evenly.

• "round": The background image is repeated as many times as necessary to fill the background area, while also scaling the image if needed to avoid clipping.

• Here's an example that demonstrates the usage of the "background-repeat" property:

    body {

        background-image: url(path/to/image.jpg);

        background-repeat: no-repeat;

    }

• In this case, the background image specified by the "background-image" property will be displayed only once without any repetition.

• It's worth mentioning that you can also combine multiple values together to control both horizontal and vertical repetition. For example:

    body {

        background-image: url(path/to/image.jpg);

        background-repeat: repeat-x repeat-y;

    }

• This will repeat the background image both horizontally and vertically.
  

• Program 1:

    <style>

        * {

            background-image: url("./emoji.png");

        }

    </style>

• or

    <style>

        * {

            background-image: url("./emoji.png");

            background-repeat: repeat;

        }

    </style>

• Output:

• Program 2: background-repeat: no-repeat;

    <style>

        * {

            background-image: url("./emoji.png");

            background-repeat: no-repeat;

            /* Do not repeat the image in background */

        }

    </style>

• Output:

• Program 3: background-repeat: repeat-x;

    <style>

        * {

            background-image: url("./emoji.png");

            background-repeat: repeat-x;

            /* repeat the image only horizontally */

        }

    </style>

• Output:

• Program 4: background-repeat: repeat-y;

    <style>

        * {

            background-image: url("./emoji.png");

            background-repeat: repeat-y;

            /* repeat the image only vertically */

        }

    </style>

• Output:

• Program 5:
• Perfectly fit the background image in background of the web page without clipping.

    <style>

        * {

            background-image: url("./emoji.png");

            background-repeat: space;

        }

    </style>

• Output: