Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .parallax-effect { background-image: url("https://images.unsplash.com/photo-1453747063559-36695c8771bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1050&q=80"); min-height: 600px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .text { height: 1000px; background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4); font-size: 36px; text-align: center; font-family: 'Raleway', Arial, sans-serif; } </style> </head> <body> <div class="parallax-effect"></div> <div class="text"> Parallax Effect </div> </body> </html>