clip-path を使ってスマホで背景を固定表示する方法

スマホで背景を固定表示する方法を紹介します。
例えば、スマホでも background attachment fixed を使ったような表示をしたい時に便利な方法です。

1. clip-path を使った背景固定表示の方法

clip-path を使った背景固定表示の方法

背景画像を固定表示させる background attachment fixed は、スマホでは background-size: cover; と併用して使用することができません。そのため、背景を固定するためには、パソコンとスマホで別々の記述方法を利用する場合があります。
ですが clip-path を利用することで、パソコンとスマホを同じ記述で対応することができるようになります。

表示サンプルこちら。

HTMLはこちら。

<div class="fixed-wrap">

  <div class="fixed"></div>

</div>

CSSはこちら。

div.fixed-wrap {

	position: relative;

	clip-path: inset(0 0 0 0);

	width: 100%;

	height: 300px;

}

div.fixed {

	position: fixed;

	top: 0;

	left: 0;

	width: 100vw;

	height: 100vh;

	background-image: url(image.jpg);

	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

}

マスクのための親要素に overflow: hidden; を利用しがちですが、clip-path を利用することで、z-index なども追加する必要がないで、CSSもシンプルになります。
clip-path: inset(0 0 0 0); で、親要素の四隅を基準にマスクを作っています。また clip-path を使うことで、楕円や多角形など、形を変更することも可能です。

まとめ

スマホで背景を固定表示する方法を紹介しました。