iOSのsafariでbackground-attachmentが使えないので対策【CSSのみ】
| HTML/CSS/PHPbackground-attachmentを使いたいのにiOSのsafariで使えないので困ったことないですか?
ぼくはよく困ってました。
背景全体にする場合は::before要素つかって
position: fixed;で後ろ側において固定させてしまったらいいんですが、
要素ごとに変えたりとか?
重ね順とかそういうの変えたりとかで試行錯誤したんですが
そのあたりが簡単にできるってことがわかりました。
ってことで、まずはコードを紹介!
// html
<div class="section">
<div class="section_bg"></div>
<div class="section_contents">
// コンテンツ内容をここに
</div>
</div>
// scss
.section{
position: relative;
overflow: hidden;
&_bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip: rect(0, auto, auto, 0);
z-index: -1;
&::before{
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url(pathto/画像.jpg) center / cover no-repeat;
}
}
}
上で説明したとおり基本は
before要素つかってposition: fixed;を使うところまでは一緒、
ポイントは、before要素の枠にclipつかって切り抜くってことです。
clipつかって枠内にしか表示しないってことです。
これでほぼ、background-attachmentと同じ動きができるようになります。