HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ height:800px; } #parent{ background-image: url("ocean.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-size: cover; background-position: center; height: 300px; color: #fff; overflow-y: scroll; } #child{ line-height: 4; } </style> </head> <body> <div id="parent"> <div id="child"> <h1>CSS background-attachment Property</h1> <p>CSS background-attachment to 'scroll'.</p> <p>First, scroll the div</p> <p>Some more content</p> <p>Some more content</p> <p>Some more content</p> </div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("parent"); function myFunction(){ x.style.backgroundAttachment = "fixed"; } </script> <p><strong>Note</strong>: Click on the button to change the 'background-attachment' from scroll to fixed.</p> </body> </html>
OUTPUT
×

Save as Private