HTML | DOM Style backgroundRepeat Property

Last Updated : 09 Aug, 2022

The backgroundRepeat property in HTML DOM is used to set or return the CSS backgroundRepeat property. It also checks whether the background-image is repeated or not.

Syntax:

It is used to returns the backgroundRepeat property.

object.style.backgroundRepeat

It is used to set the backgroundRepeat property.

object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|
no-repeat|initial|inherit"

Property Values:

repeat: It is used to repeat the background image both horizontally and vertically. It is the default value.
repeat-x: It is used to repeat the background image horizontally.
repeat-y: It is used to set the background image repeated only vertically.
no-repeat: It does not repeat the background image. It displays the background image only once.

Return Value: It returns a string value which represent how to background image repeated.

Example 1:

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            DOM Style background-repeat property
        </title> 
         
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"); 
                background-size: 200px 150px; 
                text-align:center; 
            } 
        </style> 
    </head> 
     
    <body> 
        <h1>GeeksforGeeks</h1> 
         
        <h2>
            DOM Style backgroundRepeat Property
        </h2> 
         
        <button onclick = "myGeeks()">
            Submit
        </button>
         
        <script>
            function myGeeks() {
                document.body.style.backgroundRepeat = "no-repeat";
            } 
        </script>
    </body> 
</html>                                     

Output:

Before Click on the button:

After Click on the button:

Example 2:

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            DOM Style 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>
            DOM Style backgroundRepeat Property
        </h2> 
         
        <button onclick = "myGeeks()">
            Submit
        </button>
         
        <script>
            function myGeeks() {
                document.body.style.backgroundRepeat = "repeat-x";
            } 
        </script>
    </body> 
</html>                    