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

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP