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