CSS | background-repeat Property

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:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>background-repeat property</title> 
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                background-repeat: repeat; 
                background-size: 200px 150px; 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2>background-repeat: repeat;</h2> 
    </body> 
</html>                     

Output:

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

Syntax:

element {
    background-repeat: repeat-x;
}

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>background-repeat property</title> 
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                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>                     

Output:

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

Syntax:

element {
    background-repeat: repeat-y;
}

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>background-repeat property</title> 
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                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>                     

Output:

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

Syntax:

element {
    background-image: no-repeat;
}

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>background-repeat property</title> 
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                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>                     

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

Recommended Posts: