Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS background-attachment property</title> <style> body { width: 250; height: 200px; overflow: scroll; background-image: url("/examples/images/recycle.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; } </style> </head> <body> <h1>The background-image is fixed.</h1> <p><strong>Tip:</strong> Scroll down the page to see the effect.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p> </body> </html>