Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Fixing background-attachment in CSS</title> <style> body { background-image: url("/examples/images/bell.png"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; } </style> </head> <body> <h1>Background Attachment Demo</h1> <p><strong>Tip:</strong> Scroll down the page to see how background-attachment property works.</p> <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> <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>