BLOG

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

| HTML / CSS

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

RECENT POSTS

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

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

一周回ってapple 純正メモって使いやすい

使わないとかない!flexでの間隔の設定が簡単にできるgap!

CATEGORY

POPULAR POSTS

PAGE TOP