Home
CSS
CSS Backgrounds
Background Attachment
Tryit: Background image that scrolls with page
Run ❯
Get your
own
website
Result Size:
625 x 534
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: scroll; } </style> </head> <body> <h1>The background-attachment Property</h1> <p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p> <p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> <p>The background-image scrolls. Try to scroll down the page.</p> </body> </html>