CSS基礎 練習問題 62：背景画像のスクロール制御
背景画像を指定した際、ページをスクロールしても背景画像だけは動かずに画面の同じ位置に固定しておきたい場合、正しいCSSの書き方はどれか。
- background-attachment: fixed;
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
- background-image: none;
正解と解説を見る
正解：background-attachment: fixed;
背景画像をスクロールさせずに画面上の同じ位置に留めるには「background-attachment: fixed;」が正解です。
【正解の理由】
「background-attachment」プロパティに「fixed」を指定すると、要素をスクロールしても背景画像が画面に対して固定され、視差効果のような演出を作ることができます。
【不正解の理由】
• 「background-position: center;」は、背景画像を表示領域の中央に配置するための指定です
• 「background-repeat: no-repeat;」は、背景画像が上下左右に繰り返し表示されるのを防ぎ、1度だけ表示させる指定です
• 「background-size: contain;」は、背景画像が見切れないように縦横比を保ちつつ最大サイズで表示する指定です
• 「background-image: none;」は、背景画像を一切表示しないようにする指定です