Computer >> Computer tutorials >  >> Programming >> Javascript

How to set the painting area of the background with JavaScript?


To set the painting area of the background with JavaScript, use the backgroundClip property. You can try to run the following code to set the painting area of the background −

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px dashed green;
            padding: 35px;
            width: 600px;
            height: 400px;
            background-color: blue;
            background-clip: border-box;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">Set painting area</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.backgroundClip = "content-box";
         }
      </script>
   </body>
</html>