Skip to content
Related Articles

Related Articles

HTML | DOM Style backgroundRepeat Property

View Discussion
Improve Article
Save Article
  • Last Updated : 09 Aug, 2022
View Discussion
Improve Article
Save Article

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(
                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(
                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>                   

Output: 

Before Click on the button:

  

After Click on the button: 

 

Supported Browsers: The browser supported by DOM Style backgroundRepeat property are listed below:

  • Google Chrome 1.0 and above
  • Edge 12 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 3.5 and above
  • Safari 1.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!