【CSS】「background-attachment」の使い方。【とても分かりやすい】

CSSの「background-attachment」の使い方が詳しく知りたい。

この記事はこのような方へ向けて書いています。

この記事を読むことで、これらの知識が得られます。

この記事でサクッと「background-attachment」について学習しちゃって下さい！

また、下の動画でも「background-attachment」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

「background-attachment」は何ができるプロパティ？

「background-attachment」を使うことで、背景画像の「スクロールに関する設定」をすることができます。

わりと細かくて、テクニカルなプロパティですが、知っておくと便利な場面もあると思います！

上の動画は通常のよくあるブログのページのようなものです。

画像は背景画像として設定しています。

こんな感じで、スクロールした時に「背景画像をどこに固定するか？」「どのように固定するか？」などという細かい設定ができます。

なるほど！イメージできたよ。

「background-attachment」に設定できる値は？

「background-attachment」に設定できる値は、下記の通りです。

なるほど！これらが使えるんだね！

※他には、「unset」などの、「グローバル値」も使えます。

また、「グローバル値」については下記の記事で解説しています。

「background-attachment」の使い方！

それでは、「background-attachment」の使い方を解説していきますね！

丁寧に書きます！！

「scroll（初期値）」

<h2>テキスト。テキスト。テキスト。</h2>
<p>テキスト。テキスト。テキスト。～～～</p>
<div class="box">キスト。テキスト。テキスト。～～～</div>
<p>テキスト。テキスト。テキスト～～～</p>

.box {
  background-image: url(mati_pengin.jpg);
  overflow-y: scroll;
  width: 800px;
  height: 460px;

  background-attachment: scroll;
}

※適用されているコード全てじゃなく、ピックアップして書いています。

「background-attachment」に「scroll（初期値）」を使うと、もしその要素がスクロール可能な場合、背景画像はその要素の表示領域内で固定されますが、外側のスクロールに関しては、特に固定されません。

上の動画のような感じです。

例えば、上の例では、「.box」の「widthは800px」で「heightは460px」です。

テキストが多いのでその範囲からコンテンツが溢れてしまいそうですが、「overflow-y: scroll;」なので、その範囲内から溢れずにスクロールで表示することができています。

その「width」と「height」で指定した表示領域の中で、例えば上辺から10px下がった位置に背景画像の上端が合わせられ、かつ、左辺から10px右に移動した位置に背景画像の左端が合わせれられる。のような指定ができます。

要素内のスクロールによって、テキストが流れていっても、背景画像がその要素の中でだけ固定される点に注意してください。

「fixed」

<h2>テキスト。テキスト。テキスト。</h2>
<p>テキスト。テキスト。テキスト。～～～</p>
<div class="box">キスト。テキスト。テキスト。～～～</div>
<p>テキスト。テキスト。テキスト～～～</p>

.box {
  background-image: url(mati_pengin.jpg);
  overflow-y: scroll;
  width: 800px;
  height: 460px;

  background-attachment: fixed;
}

※適用されているコード全てじゃなく、ピックアップして書いています。

「background-attachment」に「fixed」を使うと、背景画像は「viewport」に対して相対的に固定されます。

上の動画のような感じです。

背景画像は、「viewport」に対して相対的に固定されるので、例えば「viewport」の上辺から10px下がった位置に背景画像の上端が合わせられ、かつ、「viewport」の左辺から10px右に移動した位置に背景画像の左端が合わせれられる。ような指定ができます。

後は表示領域がスクロールされることで、背景画像が見える感じになります。

「viewport」とは、Webページが表示されるエリアのことです。

つまり、ウィンドウのエリアのことですね。

Webブラウザを使ってWebページを見ると思いますが、そのWebブラウザでWebページを開いているウィンドウのエリアのことを指します。

「local」

※適用されているコード全てじゃなく、ピックアップして書いています。

「background-attachment」に「local」を使うと、背景画像は表示領域内でも、「viewport」に対しても、固定されません。

なのでその要素内や、外側をスクロールすると、普通に流れていきます。

上の動画のような感じです。

なるほど！普通の画像が置いてあるみたいだね！

そうだね！背景画像なので背景にありますが、「local」だとスクロールに関しては、img要素の画像みたいな感じに、スクロールすると普通に流れていく感じになる！

公式定義について。

「background-attachment」の公式定義は、下記の通りです。

これについても、知っておいてください！

複数の背景画像に設定するには？

.container {
    background-image: url(bg_1.png), url(bg_2.png), url(bg_3.png);
    background-attachment: scroll, local, fixed;
  }

複数の背景画像に対して「background-attachment」を使うには、「 ( , )カンマ」区切りで複数の値を書けばＯＫです。

「background-image」の１つ目の値には、「background-attachment」の１つ目の値、

「background-image」の２つ目の値には、「background-attachment」の２つ目の値、

そんな感じで順番に対応します。

「bg_2.png」に対しては「local」

「bg_3.png」に対しては「fixed」ですね！

なるほど！

「background-attachment」の使用例！

このように「fixed」を使うのが多いのかな、と思います。

「background-attachment: fixed;」を使うと、背景画像が「viewport」に固定されるので、こんな感じで少しお洒落というか、一つのデザイン的なアクセントになるWebサイトが簡単に実装できます。

たしかに、これいいね！

でも注意してほしいのは「ios」で使えないので「iPhone」でみたら上手く機能しないところですね。なのであくまでもPC向けになります。

「background-attachment」を使う上での注意点は？？

使用上の注意点について知っておかないと、「なんで効かないんだ？」「上手くいかないのは何で？」となるかもしれませんので、知っておくといいかと思います！

それでは書いていくよ！

「fixed」と「background-clip: text;」は両立は上手くいかないことがある。

「background-attachment: fixed;」と「background-clip: text;」は一緒に使うと、その要素をスクロールしても、中のコンテンツが流れなくなります。なので注意してください。

ですが、外側のスクロールに対しては、上手くいくようですので、使う場合は注意してたしかめながら使ってみてください。

「background-clip」については、こちらの記事で丁寧に解説していますので、もし気になったらお読みください！サクッと読めます。

「ios」では「background-attachment: fixed;」は使えない。

このように書かれているブログ記事がたくさん見つかりますが、そもそもiPhoneで「background-attachment: fixed;」は使えません。

たとえ、「background-size: cover;」としていなくても、使えないので注意しましょう。

「iPhone」では使えません！

ブラウザの対応状況。

引用元：https://caniuse.com/?search=background-attachment

ブラウザの対応状況を調べるには、「Can I use」というWebサイトを参照するといいと思います。

「background-attachment」は、「Safari on iOS」「Opera Mini」「Android Browser」で対応していないようです。なのでスマホ向けにも考慮したコーディングをする場合は、注意が必要ですね。

最新の情報は、上記のリンクから「Can I use」へアクセスして確かめてみてください。

参考リンク。

標準仕様。
https://drafts.csswg.org/css-backgrounds/#the-background-attachment

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/background-attachment

Can I use
https://caniuse.com/?search=background-attachment

あわせて読みたい記事。

まとめ。

「background-attachment」を使うと、背景画像の「スクロールに関する設定」ができる。

「background-attachment」に設定できる値は、下記の通り。

「background-attachment」を使う上での注意点は下記の２つがある。

• 「fixed」と「background-clip: text;」は両立は上手くいかないことがある。
• 「ios」では「background-attachment: fixed;」は使えない。

また、下の動画でも「background-attachment」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

ではまた！