How to style background image to no repeat with JavaScript DOM?

Javascript Server Side Programming Programming

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 need completely understand the properties used to set the images as the background.

Otherwise, it will create problems for you like not showing the full image in the background, repeating the image horizontally or vertically many times, etc. In this tutorial, we are going to discuss how we can style the background image to no-repeat with JavaScript DOM.

Using the backgroundRepeart 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-epeat property in CSS. The backgroundRepeat property accepts the following value −

initial − The initial value will set the backgroundRepeat property to its default value.
inherit − It will set the same value which given to the parent element of the element to which we are currently setting the property.
repeat − This is the default value of the backgroundRepeat property that repeats the image in both horizontal as well as vertical directions.
repeat-x − It sets the property to repeat the image in the horizontal direction only.
repeat-y − It sets the property to repeat the image in the vertical direction only.
no-repeat − This value sets the backgrounRepeat property to never repeat the image neither in horizontal nor in the vertical direction.

Syntax

The following syntax will be followed to set the backgroundRepeat property to style background image to no repeat −

var varName=document.getElementById('id')
varName.style.backgroundRepeat="value";

In the above syntax, first, we get the element to which we want to set the property using its id and then assign a value to the property.

Let us under it with help of some code examples.

Algorithm

Step 1 − In the first step, we attach a background image to the body element of the document using internal CSS.
Step 2 − In the next step, we will change the backgroundRepeat to no−repeat using JavaScript DOM, which is by default set to repeat.
Step 3 − In this step, we will show all the changes by instructing the user to click on the button to style the background image to "no repeat".

Example 1

The below example will explain how we can use the backgroundRepeat property to style the background image to no repeat with JavaScript DOM −

<!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 </h2>
   <div id="result">Before clicking the button</div>
   <button id="btn" onclick="display()">click to style no repeat</button>
   <script>
      function display() {
         var obj = document.getElementById("result");
         var body = document.body;
         body.style.backgroundRepeat = "no-repeat";
         obj.innerHTML = "After clicking the button";
      }
   </script>
</body>
</html>

In the above example, we used the backgroundRepeat property with the value no−repeat on the body tag to stop repeating the image. All the changes will be visible to you just by clicking the button.

Let us discuss another example in which the image is repeating in the horizontal direction −

NOTE − The algorithm of the above example and this example is almost similar; you just need to add the background−repeat property in internal CSS while giving a background image to the body tag. As shown below example −

Example 2

The example below will illustrate the use of backgroundRepeat property −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
         background-repeat: repeat-x;
      }
   </style>
</head>
<body>
   <h2 style="color: blue;">Style background image to no repeat with JavaScript DOM </h2>
   <div id="result">Before clicking the button</div>
   <button id="btn" onclick="display()">click to style no repeat</button>
   <script>
      function display() {
         var obj = document.getElementById("result");
         var body = document.body;
         body.style.backgroundRepeat = "no-repeat";
         obj.innerHTML = "After clicking the button";
      }
   </script>
</body>
</html>

In this example, we can clearly see that before we click the button the image was repeating in the horizontal direction while after clicking on the button the image stopped repeating and only a single image is visible on the whole screen.

Let us see another example where the image is repeating in the vertical direction.

NOTE: The algorithm of this example is similar to the previous one; you just need to replace the repeat−x in the previous example with repeat−y to repeat the image in the vertical direction.

Example 3

Below example shows the vertical image repetition stopped using the backgrounRepeat with JavaScript −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
         background-repeat: repeat-y;
      }
   </style>
</head>
<body>
   <h2 style="color: blue;">Style background image to no repeat with JavaScript DOM</h2>
   <div id="result">Before clicking the button</div>
   <button id="btn" onclick="display()">click to style no repeat</button>
   <script>
      function display() {
         var obj = document.getElementById("result");
         var body = document.body;
         body.style.backgroundRepeat = "no-repeat";
         obj.innerHTML = "After clicking the button";
      }
   </script>
</body>
</html>

In this example, we have stopped the image repeating in the vertical direction by using the backgroundRepeat property with JavaScript DOM.

In this tutorial, we have learned about the backgroundRepeat property of JavaScript DOM to stop repeating the image in any direction, whether it is repeating in vertical, horizontal or in both directions.