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

JavascriptWeb DevelopmentFront End Scripts

To set the positioning area of the background image in JavaScript, use the backgroundOrigin property.

Example

You can try to run the following code to learn how to set the positioning area of the image for the background −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px dashed yellow;
            padding: 35px;
            width: 600px;
            height: 400px;
            background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">Set area of background image</button>
      <div id="box">
         This is Demo Text! This is Demo Text! This is Demo Text!
         This is Demo Text! This is Demo Text!
      </div>
      <script>
         function display() {
            document.getElementById("box").style.backgroundOrigin = "content-box";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 06:05:40
Advertisements