CSSスキル - 第5章 Lesson3

スクロール固定の背景画像を設定する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

スクロールしてもついてくる、背景画像を設定するプロパティの書き方について、初心者向けに解説しています。



この動画で学べること

・スクロールしても、画像を固定した位置から動かないようにする方法



スクロールしても、画像を固定した位置から動かないようにする方法

スクロールしても、画像を固定した位置から動かないようにする設定方法を見ていきましょう。
まずは、背景画像を<body>タグに設定していきます。



body {
background-image: url(images/flower.png);
}



一度、保存してブラウザで見てみましょう。
背景に指定したバラの画像がタイル状に敷き詰められました。
今回は、タイル状に表示するのではなく、一回だけの表示にしたいので、プロパティの値に「no-repeat」と書きます。
また、表示させる位置を画面の右下にもってきたいので、background-positionのプロパティを追加し、値に「right bottom」と設定してください。



body {
background-image: url(images/flower.png);
background-repeat: no-repeat;
background-position: right bottom;
}



保存してブラウザで見てみましょう。
バラの数が1個になり、右下に配置されました。
最後に、スクロールしても背景の位置が変わらないように固定したいと思います。
このとき使うのはbackground-attachmentというプロパティで、値には「fixed」と入力しましょう。



body {
background-image: url(images/flower.png);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}



ブラウザで見てみると、スクロールしても背景が固定されたまま動かない状態にすることができました。