BLOG

ブログ

  • 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 端末でも背景画像が固定されます。