BLOG

iOSのsafariでbackground-attachmentが使えないので対策【CSSのみ】

| HTML/CSS/PHP

background-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と同じ動きができるようになります。

PAGE TOP