cssで背景画像をつける background-attachmentの違いを検証してみた

要素の背景に画像をつけたい時、background-imageを使います。

background-attachmentを使おうと思ったのですが、いまいち違いがわからなかったので自分で検証してみようと思います。

その前に、要素の背景に画像をつけたい時に使うプロパティを解説します
(プロパティ名：値① / 値②...のように書いています。)

background-image: url(‘画像のパス’)
background-repeat: repeat(初期値) / no-repeat
background-size:
contain(画像全て収まるように) / 　　　　　　　　　　　　　　　　　　　　 cover(サイズ変えてもいいので要素全体を覆えるように※縦横比は変えず)/ px指定 /
%指定
background-position: center / left / top / bottom / px指定 / %指定

上記のショートハンド　
　　background: url() リピートするか？ position / size;
    ※potisionとsizeの間には 「 / 」 (スラッシュ)が必要
　　　例）　background: url() no-repeat center / contain;

ここからが本題です。スクロールした時の挙動をbackground-attachmentでつけでみようと思います。

background-attachmentは３つの値を取ることができます。

今回の結論

「background-attachmentの違いを区別する」には、

の２つを意識します。

それぞれを解説していきます。
①local  ②fixed. ③scroll. の順で解説します。

今回は具体例として、以下のようなページを作っていきます。

	要素をスクロールした時	ページをスクロールした時
local	動く	動く

テキストをスクロールすると、写真も一緒にスクロールされます。
テキストに写真がくっついている状態です。

	要素をスクロールした時	ページをスクロールした時
fixed	動かない（要素に固定）	動かない（表示領域に固定）

テキストをスクロールしても、写真は固定されたままです。
さらに、ページをスクロールしても写真は上に行かずその場に留まってます。
写真がページ（表示領域）自体に固定されているような状態になっています。

	要素をスクロールした時	ページをスクロールした時
scroll(初期値)	動かない（要素に固定）	動く

テキストをスクロールしても、写真は固定されたままです。
ですが、ページをスクロールすると写真も一緒に上に行きます。

「background-attachmentの違いを区別する」には、

の２つを意識します。

おしゃれなデザインを作成できるよう、一緒にたくさん学びましょう！

以下は私がお世話になっているオンラインスクールです。