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>