【HTML&CSS】background-attachmentの使い方をわかりやすく説明


こんにちは、@AWAKOJIです。

今日も、薬剤師をしながらプログラミングの勉強をしています。

この記事では、background-attachment プロパティの使い方についてわかりやすく解説します。

このプロパティを使うことで、スクロールしたときの背景画像の挙動について設定することができます。

background-attachmentプロパティを使って自分好みのwebサイトを目指しましょう。

スポンサーリンク

基礎知識

background-attachmentプロパティは、CSSで使用される言語です。

CSSとは、webサイトのデザインを担当する言語です。

詳しくはこちらの記事をどうぞ。

CSSとは?書き方を簡単にわかりやすく説明(漫画付)
記事のポイント CSSはWEB上のデザインを担当する言語である プログラミング初心者 『CSS?なんじゃそれ?HTMLとどんな関係があるの?』 こんにちは、AWAKOJIです。 今日も薬剤師をしながらプログラミングの勉...

CSSの基本構造は以下の通りです。


そして今回、background-attachmentプロパティを使うので、以下の構造となります。

“background”(背景)

“attachment”(取り付け)

という意味です。

background-positionのセレクタ

background-attachmentのセレクタにはすべての要素を書くことができます。

つまり、

body⇒サイト全体

h1⇒見出し

table⇒表

tr⇒表の行

div⇒ブロックレベル要素

span⇒インライン要素

など、どの場所にも設定できるというわけです。

background-attachmentの値

値に書けるのは

  • scroll(初期値)
  • fixed
  • local

の3つです。

それぞれ見ていきます。

今回はこのsample.htmlファイルを読み込みます。

本文が長くなっていてスクロールが必要な状態です。

CSSファイルは以下の状態です。

background-imageプロパティで水玉の画像を読み込んでいます。

background-repeatプロパティで繰り返し表示はなしにしています。

background-positionプロパティで中央表示にしています。

※ブラウザ表示(クリックで拡大表示されます)

scroll

値にscrollを指定します。

※ブラウザ表示(クリックで拡大表示されます)

スクロールしたとき背景画像も一緒に動きます。

scrollは初期値なので、値を設定しなくても同じ動きをします。

fixed

値にfixedを指定します。

※ブラウザ表示(クリックで拡大表示されます)

スクロールしても背景画像は固定されたままです。

local

localはページの一部がスクロール表示だったとき、その中の背景画像の挙動を設定するための値です。

こんなページがあったとします。

※ブラウザ表示(クリックで拡大表示されます)

500px四方のdivタグの中にテキストを入力しました。

そして、入りきらないテキストはスクロールすれば見ることができます。

divタグの背景に水玉画像を設定してあります。

スクロール時の背景画像は、固定されています。

このときに、localを設定します。

※ブラウザ表示(クリックで拡大表示されます)

スクロールすると一緒に背景画像が動くようになります。

※ページの一部をスクロール表示にしているとき、その中の背景画像はscrollやfixedにしても固定されています。

スポンサーリンク

おすすめ記事

フォローする