position:sticky;でパララックス風スクロール

(1)画像１つを背景に全面配置

下にスクロールしてください

box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:100;
background-image: url("./imgs/sticky/0001.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;

(2)画像１つを背景にリピート配置

下にスクロールしてください

background-attachment:fixed;
（背景はスクロールしない）

box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:200;
background-image: url("./imgs/sticky/stone01.jpg"); 
background-repeat: repeat;
background-attachment: fixed;
background-size: auto;

(3)画像１つを背景に全面配置

下にスクロールしてください

background-attachment:fixed;
（背景はスクロールしない）

box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:300;
background-image: url("./imgs/sticky/0009.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;

(4)画像１つを背景にリピート配置

下にスクロールしてください

background-attachment: scroll;
（背景もスクロールする）

box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:400;
background-image: url("./imgs/sticky/stone01.jpg"); 
background-repeat: repeat;
background-attachment: scroll;
background-size: auto;

(5)画像１つを背景に全面配置

下にスクロールしてください

background-attachment: scroll;
（背景もスクロールする）

z-index:500;
background-image: url("./imgs/sticky/0001.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-size:cover;

(6)画像無しで背景色のみの場合

下にスクロールしてください

box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:600;
background-color: #DEDCB8;