How to set the positioning area of the background image with JavaScript?

Javascript Web Development Front End Scripts

In this tutorial, we will learn how to set the positioning area of the background image using JavaScript

The background image’s positioning area in a program can be changed using the HTML DOM Style background-origin property.

Background-origin is a feature that allows you to modify the background images of a webpage. The origin of the picture in the background is set using this property. The background image origin is set to the upper-left corner of the screen/webpage by default.

The background-origin property specifies the origin of the background: from the border start, within the border, or the padding. When the background-attachment value is set to "fixed," this property will not operate. The background-origin property is identical to the background-clip property, except instead of cutting the background, it resizes it. The top-left corner of the screen is the element's default origin.

We may use commas to separate the values of the background-origin attribute for each background image if the element contains more than one background picture. Every picture will correspond to the value of the background-origin attribute.

Following are the methods to set the positioning area of the background image with JavaScript.

Using the backgroundOrigin content-box property

The backgroundOrigin property provides the location of the background picture, and the background is positioned relative to the content box using the content-box property. The backdrop begins at the upper left corner of the content. The content placed inside the box is covered in the content-box property.

The padding box is the default value and places the background relative to the box. The padding edge's top left corner serves as the starting point for the background.

Syntax

document.getElementById("box").style.backgroundOrigin = "content-box";

The box is fetched using the getElementbyId() method, and the background origin of the box is specified to the content box property.

Example

In the example, we have created a box using parameters such as border, padding, width, height, and background color. The box contains some content in the form of text inside.

The box accommodates a picture whose positioning area is specified as its default value of the padding box. This property is changed to the content box property of the background-origin attribute. This image was placed in the padding area of the box and is shifted to the area which contains the text.


<html>
<head>
<style>
   #box {
      border: 3px dashed red;
      padding: 35px;
      width: 500px;
      height: 260px;
      background:
      url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
      background-color: yellow;
      background-origin: padding-box;
   }
</style>
</head>
<body>
   <h3> Set the positioning area of the background image using <i>
   content-box property </i> </h3>
   <button onclick="myFunction()"> Set area of background
   image</button>
   <div id="box">
      This is demo text.
   </div>
   <script>
      function myFunction() {
         document.getElementById("box").style.backgroundOrigin="content-box";
      }
   </script>
</body>
</html>

Using the backgroundOrigin padding-box property

The backgroundOrigin property indicates the background's positioning area, which is the position of the origin of an image supplied by the background-image property.

The padding box property specifies that the background extends to the padding's outer edge. Below the border, no background is drawn. This is the default option. The borderbox property specifies that the background extends to the borders outside the edge. The background is drawn underneath the border.

This background-origin property's initial value is set to its default value. The "inherit" property specifies that the related element inherits the background-origin property of its parent element.

Syntax

document.getElementById("box").style.backgroundOrigin = "padding-box";

The box is acquired using the getElementbyId() method, and the padding box property provides the box's background-origin.

Example

In this example, we've constructed a box including border, padding, width, height, and background color. Inside the box, there is some data in the form of text. The box contains an image whose placement area is specified as the border box attribute. This property is modified to the background-origin attribute's padding box property. This picture was placed such that it covered the box's borders. However, after applying the padding box property, the image is relocated to the region that encloses the box's padding, omitting the borders.


<html>
<head>
<style>
   #box {
      border: 3px dashed red;
      padding: 35px;
      width: 500px;
      height: 260px;
      background:
      url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
      background-color: yellow;
      background-origin: border-box;
   }
</style>
</head>
<body>
   <h3> Set the positioning area of the background image using <i>
   padding-box property </i> </h3>
   <button onclick="myFunction()"> Set area of background
   image</button>
   <div id="box">
      This is a demo text.
   </div>
   <script>
      function myFunction() {
         document.getElementById("box").style.backgroundOrigin="padding-box";
      }
   </script>
</body>
</html>

In this tutorial, we learned how to set the positioning area of the background image with JavaScript using the background-origin content-box property and backgroundorigin padding-box property.