HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ border: 10px double #8c8c8c; padding: 25px; height: 240px; width: 240px; margin-bottom:15px; background: url(husky.jpg); background-repeat: no-repeat; background-origin: border-box; } </style> </head> <body> <h1>CSS background-origin Property</h1> <div id="point"> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("point"); function myFunction(){ x.style.backgroundOrigin = "padding-box"; } </script> <p><strong>Note</strong>: Click on the button to change the 'background-origin' from border-box to padding-box.</p> </body> </html>
OUTPUT
×

Save as Private