CSSで背景の設定をする

今日は、CSSで背景の設定をするプロパティをご紹介します。
背景色をつけたり、背景に画像を表示させたりさせることが出来ます。その中でも、よく使う物を紹介していきます。

背景色をつける

背景の色を指定したいときに使うのが、background-colorプロパティです。値には、色の名前か、カラーコードを使います。

上記のように記述すると、body(画面全部)の背景色が、赤になります。

スクリーンショット 2015-06-26 13.53.50

背景に画像を表示させる

背景に画像を指定したいときに使うのが、background-imageプロパティです。値には、url(画像へのパス)のように記述します。

上記のように記述すると、パスで指定された画像が、画面いっぱいに繰り返されます。

スクリーンショット 2015-07-08 17.13.49

背景画像のリピート表示を設定する

背景画像のリピートの仕方を決めるのが、background-repeatプロパティです。値には、「no-repeat」、「repeat-x」、「repeat-y」のいずれかが入ります。

上記の様に記述すると、背景画像が繰り返されず、一つだけ表示されます。

スクリーンショット 2015-07-08 17.20.27

背景画像の表示位置を設定する

背景画像の表示位値をしていするには、background-positionプロパティを使います。値は、x軸方向(横方向)及びy軸方向(縦方向)の位置を、半角スペースで区切って指定します。

上記の様に記述すると、画像が横方向に50px、縦方向に100pxの所に表示されます。

スクリーンショット 2015-07-08 17.25.17

まとめ

今回は、背景に関する基本的なプロパティを紹介しました。「背景色」、「背景画像」、「背景画像のリピート」、「背景画像の表示位置」各々よく使うので、マスターしましょう。