【CSS】背景固定のパララックスデザインをお手軽に実装する方法

概要

backgroundプロパティをいくつか指定するだけ背景固定のパララックスデザインを実装できます。

前提

今回は背景は動かさず固定が前提です。

サンプルコード

<div class="parallax"></div>

<style>
.parallax {
  /* 基本設定 */
  background-image: url('指定画像パス');
　　　　background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  width: 100%;

  /* パララックス用設定 */
　　　　background-attachment: fixed;
}
</style>

参考記事

パララックスデザインとは
https://saruwakakun.com/html-css/reference/parallax