Skip to content
Related Articles

Related Articles

CSS | background-repeat Property
  • Last Updated : 07 Aug, 2019

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not.

Syntax

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

Property Values

repeat: This property is used to repeat the background image both horizontally and vertically. The last image will be clipped if it is not fit in the browser window.

  • Syntax:
    element {
        background-repeat: repeat;
    }
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>background-repeat property</title>
            <style>
                body {
                    background-image: url(
                    background-repeat: repeat;
                    background-size: 200px 150px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <h2>background-repeat: repeat;</h2>
        </body>
    </html>                    

    chevron_right

    
    

  • Output:

repeat-x: This property is used to repeat the background image horizontally.



  • Syntax:
    element {
        background-repeat: repeat-x;
    }
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>background-repeat property</title>
            <style>
                body {
                    background-image: url(
                    background-repeat: repeat-x;
                    background-size: 200px 150px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <h2>background-repeat: repeat-x;</h2>
        </body>
    </html>                    

    chevron_right

    
    

  • Output:

repeat-y: This property is used to set the background image repeated only vertically.

  • Syntax:
    element {
        background-repeat: repeat-y;
    }
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>background-repeat property</title>
            <style>
                body {
                    background-image: url(
                    background-repeat: repeat-y;
                    background-size: 200px 150px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <h2>background-repeat: repeat-y;</h2>
        </body>
    </html>                    

    chevron_right

    
    

  • Output:

no-repeat: This property does not repeat background image. It displays the background image only once.

  • Syntax:
    element {
        background-image: no-repeat;
    }
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>background-repeat property</title>
            <style>
                body {
                    background-image: url(
                    background-repeat: no-repeat;
                    background-size: 400px 250px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <h2>background-repeat: no-repeat;</h2>
        </body>
    </html>                    

    chevron_right

    
    

  • Output:

Supported Browsers: The browsers supported by background-repeat property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0
My Personal Notes arrow_drop_up
Recommended Articles
Page :