background-attachment: fixed; のiOS・safari対応

最近上のような背景に画像やグラデーションを敷き、それを切り取るような動きをよく見ます。

調べるとこれ、「background-attachment で簡単に実装できます! 」というような記事が沢山出るのですが、これがとんでもない罠で、

iOSのsafari、iPhoneには対応していません!

最近私もこの問題にぶち当たったので解決方法を紹介します。

background-attachmentと同じくJavaScript無しで実装できます。

解決方法

サンプル

サンプルページ

手順

  1. 固定したい画像を適当なdivまたは疑似要素で作り直す
  2. それをfixedで固定する
  3. clip-pathで切りとる

コード解説

#section_02 {
  position: relative;
  z-index: 10;
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
  background-color: transparent;
}

#section_02::before {
  content: '';
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: linear-gradient(170deg, #f3f2b0 0, #f3b0e8 100%, #b0f3e6 100%);
  background-attachment: fixed;
}

ポイントは切り抜きにclip-pathを使うことです。

背面に固定したとしてもfixedで固定しているとoverflow: hidden; では切り抜くことができません。

ですがclip-pathであればそれを無視して切り抜くことができます。

なのでpolygonで要素の4角を指定し長方形を作り切り抜きます。

またクリップぱclip-pathを使いこなせるのであればサンプルのように斜めにしたりすることも可能です。

私は解決に結構苦労したので皆さんのお役に立てれば幸いです!

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。