よく背景の画像を固定したいときにはbackground-attachmentをfixにしがちですが、
iOS系のブラウザでは背景画像が固定されないといったことがあります。
WebKit自体が遅れているというべきなのかはわかりませんが、
ひと手間加えてiOS系のブラウザでも背景画像が固定されるようにしていきます。
目次
背景画像が固定されないダメな例
言わずもがなかだと思いますがダメな例も載せておきます。
body {
background-image: url(...);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
...
}背景画像を固定する方法
これらの方法を使うとiOS系のブラウザでも背景を固定することができます。
ミソはbeforeを使うところです。
body::before {
content: "";
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-image: url(...);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
...
}まとめ
WebKit系だけこのような仕様なのはかなり厄介ですよね。
早くbackground-attachmentでも動くように修正されることを願うばかりです。
コメント