時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

【CSS】スクロール時に背景画像を固定する【スマホ効かない？】background-attachment: fixed

記事内に広告を含みます

パソ君
パソ君

・スクロール時に背景画像を固定したいけど、どうやるの？

・スマホの時効かないんだけど。。

こんな疑問にお答えします。

案件によっては、背景画像をスクロールしても固定させて表示させることがありますよね。

こんな感じで（iOSのスマホでは見れません※後述）

↓

実はこれCSSだけで簡単に作れちゃいます。

ジト
ジト

すぐにできるよ！

でも「CSSが効かない？」という注意点もあるんですよね。

ということで、この記事では「CSSでスクロール時に背景画像を固定する方法」について解説していきます！

この記事でわかること

・CSSでスクロール時に背景画像を固定する方法
・CSSでスクロール時に背景画像を固定する注意点
・背景画像の固定がスマホで効かない時の対策

【CSS】スクロール時に背景画像を固定する方法

結論：CSSで「background-attachment: fixed;」を指定する。

わかりやすいようにサンプルを見てみましょう（iOSのスマホでは見れません※後述）

↓

<div class="attachment"></div>
.attachment {
    background-image: url('https://jito-site.com/wp-content/uploads/2022/12/test01.jpg');
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center;
    height: 400px;
}

スクロールしても固定されて表示されていますよね！

このように背景画像に対して「background-attachment: fixed;」を指定するだけで、固定させて表示させることができます！

「background-attachment」とは？

「background-attachment」とは背景画像を固定するか、要素と一緒にスクロールして表示するかを指定できるプロパティ。

background-attachment: fixed; //固定。
background-attachment: scroll; //初期値。他要素と一緒にスクロール

【CSS】スクロール時に背景画像を固定する方法【注意点】

とはいえ「background-attachment: fixed;」を使う場合、注意点がいくつかあります。

それがこちら

  1. 高さをとる
  2. backgroundプロパティを指定する
  3. 大き目の画像を使用
  4. 未対応の場合がある
  5. スマホでは効かない

順に見ていきましょう。

注意点➀：高さをとる

まずある程度の高さをとる必要があります。でないと、背景画像が表示すらされませんからね。

今回の例でいうと、height: 400px;を指定して高さをとっていますよ。

.attachment {
    ~~
    height: 400px;
}

中にテキストなどのコンテンツがあれば、自然と高さはとれるかと思います。

ただ背景画像のみ表示させる場合は「height」や「padding」などで高さを指定してあげましょう。

注意点➁：backgroundプロパティを指定する

次にattachment以外のbackgroundプロパティを指定してあげること。

ようは下記らですね。

  • size
  • repeat
  • position

今回の例でいうとこんな感じ↓

.attachment {
    ~~
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center;
    ~~
}

これらを指定してあげないと、固定表示がうまくいかないことがあります。そのため必ず指定してあげましょう！

注意点➂：大き目の画像を使用

そして大き目の画像を使用することが注意点。

背景画像を固定する場合、だいたいが画面幅一杯に表示するかと思います。つまり小さめの画像を使用しちゃうと、PCによっては画像が荒れることも。。

なので、できれば大き目の画像を使用しましょう。

注意点➃：未対応の場合がある

次の注意点が、未対応のバージョンがあることですね。

だいたいのブラウザでは対応済み。ただ、一部「background-attachment: fixed;」が対応していないバージョンがあるので、そこは注意点かと。

注意点➄：スマホでは効かない

最後の注意点がいちばん大きな問題かと。

それはIOSでのスマホでは「background-attachment: fixed」が効かないんですよね。

先ほどのサンプルをスマホで見た方ならわかりますが、固定されて表示されていません。。

理由は「background-attachment: fixed;」と「background-size: cover;」を同時に指定するとIOSでは無効になるため。

事実Can I useでも丸枠のところに記載されております。

公式認定の仕様みたいな感じですね。

ただこれって、かなり困りますよね。

背景画像を固定する場合、横幅一杯に良い感じに表示させたいはず。でもcoverは使えない。。

「スマホ時でも背景を固定してくれ！」と言われたら詰む・・・

パソ君
パソ君

どうしよう・・

でも大丈夫です！対策はあります！

【CSS】スクロール時に背景画像を固定する【スマホ効かない時の対処法】

iOSのスマホでは「background-attachment: fixed」が効かず、背景画像を固定することができません。

そんなときの対処法があります。

結論：疑似要素を使い固定させる

わかりやすいようにサンプルを見てみましょう。

See the Pen ➀背景画像を固定 by jito-coder (@jito-coder) on CodePen. 

<div class="box">
    <div class="box__container">
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
    </div>
</div>
<div class="attachment">
    <div class="attachment__container">
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
    </div>
</div>
<div class="box">
    <div class="box__container">
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
    </div>
</div>
body {
  margin: 0;
}
.box {
    padding:5%;
    position: relative;
    background-color: #fff;
}
.box__container {
    padding:5%;
}
.attachment {
    padding:5%;
    position: relative;
}
.attachment::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-image:url('https://jito-site.com/wp-content/uploads/2022/12/test01.jpg');
    background-size: cover;
}
.attachment__container {
    background-color:rgba(255,255,255,0.8); 
    padding:5%;
}

真ん中のコンテンツだけ、背景画像が固定されて表示されているかと思います。

iOSのスマホで見ても固定されているはず。

コードの解説

キーとなるコードはここですね。

~~
<div class="attachment">
    <div class="attachment__container">
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
        <p>スマホの時に背景画像を固定させる方法は、疑似要素使うことだ！！！！！！！！！！！！</p>
    </div>
</div>
~~
.attachment {
    padding:5%;
    position: relative;
}
.attachment::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-image:url('https://jito-site.com/wp-content/uploads/2022/12/test01.jpg');
    background-size: cover;
}

「attachment」というクラス名をもったコンテンツに対して、疑似要素で背景画像を指定。

その疑似要素に対して「position: fixed」を指定して、横幅・縦幅を一杯に表示しています。

さらに「z-index:-1;」を記述することで、コンテンツの重なり順を下に。

ようはこういうこと↓

  • 疑似要素で背景画像指定
  • その疑似要素を「position: fixed」で固定
  • その疑似要素を「width:100%;」「height:100vh;」で画面幅一杯に表示
  • その疑似要素を「z-index:-1;」でコンテンツの下に表示

これが「background-attachment: fixed」を使わなくても、スマホ時に背景画像を固定させることができる対処法となります。

「background-attachment: fixed」は使わない説

backgroundにcoverとfixedを一緒に指定していると、iOSのスマホでは固定が無効にされると先述しました。

で、その場合、疑似要素を使って固定させる。

あれ、ということはbackground-attachment: fixedって使わないのか？？と思ってしまいました(笑)

だってほとんどの場合、背景固定するときパソコンもスマホも対応しますよね。
無効にならないように対策するはず。

ってことは最初からbackground-attachment: fixedを使用する考えは無くしたほうが良いのでは？と思ってしまう。

『パソコンの時は背景固定、だけどスマホの時は固定しない』という特別な案件でない限り、あまり出番はないのかもしれません。

【CSS】スクロール時に背景画像を固定する【スマホ効かない？】：まとめ

  • 「background-attachment: fixed;」を指定すれば固定可能
  • 「background-attachment: fixed;」を使うにはいくつか注意点あり
  • iOSのスマホでは「attachment: fixed;」「size: cover」を同時に使うと固定が効かない
  • 対策として疑似要素を固定させる
ジト
ジト

実務では背景画像を固定させて表示させることがあるので

覚えておこう！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【CSS】フッターを下に固定する方法【コンテンツ量が少ない時】

次の記事

【簡単】マウスカーソルをCSSで画像に変更する【cursor …