Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to style background image to no repeat with JavaScript DOM?
In this tutorial, we will learn to style the background image to no repeat with JavaScript DOM. To style the background image to no repeat with JavaScript, use the backgroundRepeat property. It allows you to set whether the background image repeats or not on a page.
The use of images in the background really makes the page attractive. But before using the image in the background, one must completely understand the properties used to set the images as the background. Otherwise, it will create problems like not showing the full image in the background, repeating the image horizontally or vertically many times, etc.
Using the backgroundRepeat Property
To style the background image to no repeat, we use the backgroundRepeat property that takes the similar values as we give to the background-repeat property in CSS. The backgroundRepeat property accepts the following values:
repeat ? This is the default value that repeats the image in both horizontal and vertical directions.
repeat-x ? It repeats the image in the horizontal direction only.
repeat-y ? It repeats the image in the vertical direction only.
no-repeat ? This value sets the property to never repeat the image in any direction.
initial ? Sets the property to its default value.
inherit ? Inherits the value from the parent element.
Syntax
var element = document.getElementById('id');
element.style.backgroundRepeat = "value";
First, we get the element using its id and then assign a value to the backgroundRepeat property.
Example 1: Default Repeat to No-Repeat
The example below shows how to change a repeating background image to no-repeat:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
}
</style>
</head>
<body>
<h3>Style background image to no repeat with JavaScript DOM</h3>
<div id="result">Before clicking the button - image repeats</div>
<button onclick="stopRepeat()">Click to Stop Repeat</button>
<script>
function stopRepeat() {
var result = document.getElementById("result");
document.body.style.backgroundRepeat = "no-repeat";
result.innerHTML = "After clicking the button - image doesn't repeat";
}
</script>
</body>
</html>
In this example, the background image initially repeats by default. When you click the button, the backgroundRepeat property is set to no-repeat, stopping the repetition.
Example 2: Horizontal Repeat to No-Repeat
This example demonstrates stopping horizontal repetition:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h3 style="color: blue;">Stop Horizontal Background Repeat</h3>
<div id="status">Image repeats horizontally</div>
<button onclick="stopHorizontalRepeat()">Stop Horizontal Repeat</button>
<script>
function stopHorizontalRepeat() {
var status = document.getElementById("status");
document.body.style.backgroundRepeat = "no-repeat";
status.innerHTML = "Horizontal repetition stopped";
}
</script>
</body>
</html>
Example 3: Vertical Repeat to No-Repeat
This example shows stopping vertical repetition:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h3 style="color: green;">Stop Vertical Background Repeat</h3>
<div id="message">Image repeats vertically</div>
<button onclick="stopVerticalRepeat()">Stop Vertical Repeat</button>
<script>
function stopVerticalRepeat() {
var message = document.getElementById("message");
document.body.style.backgroundRepeat = "no-repeat";
message.innerHTML = "Vertical repetition stopped";
}
</script>
</body>
</html>
Comparison of backgroundRepeat Values
| Value | Description | Use Case |
|---|---|---|
repeat |
Repeats in both directions | Default behavior, tile pattern |
repeat-x |
Repeats horizontally only | Header/footer patterns |
repeat-y |
Repeats vertically only | Sidebar patterns |
no-repeat |
No repetition | Single background image |
Conclusion
The backgroundRepeat property in JavaScript DOM provides complete control over background image repetition. Use no-repeat to display a single background image without tiling, which is essential for creating clean, professional layouts.
3K+ Views
