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

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

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

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

この記事でお話すること
  • background-attachmentとは?
  • background-attachmentの使い方

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

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

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

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

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

background-attachmentの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)

1.background-attachmentとは?

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

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

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

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

{ background-attachment: 値; }

値の指定方法

  • scroll:スクロールと同時に背景画像も移動します。
  • fixed:背景画像が固定されスクロールしても動かない。
  • local:背景画像がコンテンツに固定される。

初期値はscrollです。

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




2.background-attachmentの使い方

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

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

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

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

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

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?

コメントを残す

メールアドレスが公開されることはありません。