Parallax Scrolling
Scroll up and down in the image
Note: It works on a desktop, not so much in mobiles.
Here is the code:
<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1">
<style>body, html { height: 100%;}
.parallax {
/* The image used */
background-image: url('https://lh3.googleusercontent.com/JRlvgGX4RLURkOK0Qb8awylKLV67yZFGfKNszpWAsIrBZJ9iTtSK1axuVaCl1dT-bmogCngEP_qPuaG0ZZIjS2BqXilZEnYnKAL9i3q0hkjfuNDp36UPFxTTc6sU_lFe03aqOM5AxZxC73vnaA_FkXkMstvhypLeU9qakevxCyD1tzdviTHNKmfVk_bgrZTcg-UHHPV1GBbxtPX21Ek731gJPTw17_f8YRjqXOIUd-_OVSNdd9ZxNcdECHIZRqffjDFe9r3278gc30fvbs1v7o0IskafV3L_k-5n1R7oFLK7x5Z7s9E-58TV3LSdh2GV4ZOzuOfNLvDD_2B2GuQE5kwLi5jpgucVJTpLC3Fbz_tBrCv9b9GVBrCt26pAZW3c7KM9IPuIfNRS-3qAK0tYhjcmeRcbIxWiM5BGdbJp55c4MZUvbVMM5wXEKksaXEZ4LzZ1XljaLkXYiiD09x3SMbpo2ve7XCiuOf5ew1JnFOJBENwoh6xhj0-Jk3MNEYXGTy7yvo-pe0dggid1nGOODPZMH4-5VKTHFxO4KKZFOmgMqWDRGIudQRMnrwRPwkAHZu1pGtdZronWnGjhTW2OsprfWsxnf1oUV30crnPob7YAAfozjc4y_DwfxZqKXqr8lzAosu3v2jaBAHtK_va0vefVdqIFF0l7=w1447-h817-no');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style></head><body>
<div class="parallax"></div>
<div style="height:300px;background-color:gray;font-size:36px">
Scroll Up and Down this section to see the parallax scrolling effect.<br><br>See <a href="https://www.w3schools.com/howto/howto_css_parallax.asp">https://www.w3schools.com/howto/howto_css_parallax.asp</a>
</div>
<div class="parallax"></div>
</body></html>