- Web制作
background-attachment: fixedを使わずに背景画像固定を固定してiPhoneに対応する方法
目次
問題と回避方法
背景画像を固定させる時に一般的に使用される方法が background-attachment: fixed です。
ただこの方法だと iPhone を含む iOS 端末ではうまく動かないという問題が起こります。
そんな時の回避方法です。
background-attachment: fixed の代わりに position: fixed; を使用して背景画像を固定しています。
<div class="fiximg"> <img src="./fiximg.jpg" alt="" /> </div>
.fiximg {
height: 500px;
position: relative;
clip-path: inset(0);
}
.fiximg img {
object-fit: cover;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
これで iPhone を含む iOS 端末でも背景画像を固定することができます。
以下にそれぞれの実際の見え方を載せておきます。
「background-attachment」を使用しない場合
「background-attachment: fixed」を使用した場合
※iPhone や iPad では背景画像がうまく固定されません。
「position: fixed」を使用した場合
※iPhone や iPad を含む iOS 端末でも背景画像が固定されます。
名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。
