background-attachment: fixed;
で背景画像の位置が固定される?
例:
.chapter2 {
background-attachment: fixed;
max-width: inherit;
}
.chapter2 {
width: auto;
height: 100%;
position: relative;
background-size: cover;
}
.chapter2 {
background-image: url(../img/bg1.jpg);
}
他にも使うかもしれないプロパティ
background-position: center center; ←背景画像の位置
background-repeat: no-repeat; ←背景画像をリピートさせるか、させないか
background-size: ←背景画像のサイズを指定できる%やpixcelなど
auto
自動的に算出される(初期値)
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ
背景画像の幅・高さを指定する
パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定する
こんな感じでサイズ指定もできる
background-size:20px 20px;
https://6bitamemo.blogspot.com/2017/11/htmlcss.html
http://www.htmq.com/css3/background-size.shtml
makeshopでは
.chapter {
background-attachment: fixed;
max-width: inherit;
width: 100%;
height: 350px;
position: relative;
background-size: 100%;
clear: both;
background-position: center center;
background-repeat: no-repeat;
background-image: url(https://*********/*********/*********/*********);
display: inline-block;
margin-top: 48px;
}