【CSS】PCとスマホ両方の端末で背景を固定にする方法

今回は、「PCとスマホ両方の端末で背景を固定にする方法」についてまとめました。

よく出る実装なので、是非理解しておきたいところですね。

background-attachment: fixedだとスマホの時に固定されない問題

背景を固定する方法としてよくネットでは「background-attachment: fixed」を背景に指定する方法が紹介されています。

しかし、PCで見た時は固定されるがスマホで見ると背景が固定されない問題が出てきます。

以下のデモサイトをスマホで確認すると、背景が固定されていないことが分かるでしょう。

【CSS】PCとスマホ両方の端末で背景を固定にする方法

PCとスマホの両方の端末で背景を固定にするには、「background-attachment: fixed」ではなく擬似要素で配置した画像をposition: fixed;で固定すればOKです。

以下のデモサイトをPCとスマホの両方で見ても背景画像が固定されていることがわかるでしょう。

HTML

<div class="wrap">
  <div class="conts">
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
        <p>背景を固定にします。</p>
    </div>
</div>

CSS

.wrap {
  margin: 30px;
}

.wrap::before {
  content: "";
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url(https://yujiromx.com/wp-content/uploads/2022/05/sunset-gcf8985f89_640.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.conts {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  font-size: 40px;
  text-align: center;
  padding: 5%;
  max-width: 800px;
  margin: 0 auto;
}

p {
  padding: 20px;
}

ポイントは、wrap:beforeのコードです。

擬似要素で画像を配置し、それを固定させて画面全体に広げることで、スクロールしても画像が固定されるようになります。

まとめ

以上が、「PCとスマホ両方の端末で背景を固定にする方法」でした。

関連記事:

【CSS】擬似要素でパンくずリストを作成する方法 CSSで背景を透過させる方法について 「background-attachment: fixed;」で背景画像を固定する 【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法