【効かない?】CSS「background-attachment」とは? 使い方を分かりやすく解説!

background-attachmentについて知りたい人

background-attachmentについて知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

background-attachmentは背景画像の位置を固定したいときに使用します。

background-attachmentは画面スクロール時に背景画像の位置を固定するかどうかを指定するためのものです。

このプロパティを利用することでより美しいWebサイトに仕上がるので是非使ってみてはいかがでしょうか!?

そこでこの記事ではbackground-attachmentについて解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

background-attachmentの評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

background-attachmentプロパティはページをスクロールしたときの背景画像の表示方法を指定します。

読み方は「バックグラウンド-アタッチメント」です。

つまり、ページをスクロールしたときに背景画像がいっしょに動くかどうかということです。

値の指定方法は以下の通りです。

{ background-attachment: 値; }

初期値はscrollです。

IE/Edge、Firefox、Chrome、Opera、Safariなどのブラウザでも対応しているので使っていて問題が発生するということはなさそうです。

それではbackground-attachmentの使い方をみていきましょう。

.background { 
 background-image: url(image.png); 
 baclground-repeat: repeat-x;
 background-attachment: fixed;
}

上記のようにすることでページをスクロールしても背景画像は移動しません。

他にも値を設定できるのでいろいろと試してみることをお勧めします!

このプロパティを利用してより美しいWebサイトに仕上げてみましょう。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント