10分でわかる!CSSのbackgroundプロパティで背景を自在に設定する方法

WEBサイトを作っていると、

おしゃれな画像をWEBサイトの背景にしたい
スクロールした時に背景を固定したい

と思うことはありませんか?

今回は、そんな背景の設定の仕方についてご紹介します!

CSSのbackgroundプロパティとは?

CSSで背景を設定する時は、backgroundプロパティを使います。

背景の設定方法は大きく以下の2つがあります。

  • ・背景色を指定する … background-color
  • ・画像を背景に指定する … background-image

そのうちの1つであるbackground-imageには、設定しておくといいプロパティが3種類あります。

それは、

  • ・画像の繰り返し設定をする … background-repeat
  • ・背景画像の大きさを設定する … background-size
  • ・背景画像の位置を設定する … background-position

以上の3つです。

background-colorには似たようなプロパティとして、background: lineargradientというモノがあります。こちらはグラデーションのかかった背景色を設定出来るモノになります。

ここまでをまとめると

背景色系

background-color  背景色を指定する。
background: lineargradient  グラデーションのかかった背景色を指定する。

背景画像系

 background-image  背景に画像を指定する。
background-repeat  背景画像の繰り返しを設定する。
 background-size  背景画像のサイズを設定する。
background-position  背景画像の位置を設定する。

backgroundプロパティを使って背景色を設定しよう

それでは早速、背景色の設定からやってみましょう。

今回は、16進数RGBで色を指定します。背景色を指定したい対象に対して、以下の値を設定します。

HTML

CSS

表示イメージ

背景を指定する

このように表示されます。以上で、背景色を設定することが出来ました。

background-imageを使って背景画像を設定しよう

次に画像を背景に指定する方法です。以下のように記述してみましょう。

HTML

CSS

表示イメージ

すると、このように表示されます。

画像は設定できましたが、画像が大きすぎて見切れてしまっていますね。

background-sizeで背景画像のサイズを設定しよう

画像が見切れている時に使うのがbackground-sizeです。以下をCSSに追加してみましょう。

CSS

表示イメージ

背景が綺麗に収まっていますね。以下が、background-sizeで行う大きさの設定です。

background-sizeで設定できる値

auto  自動で算出してくれるが、基本的に画像の大きさそのまま。
contain  縦横比を保持したまま、要素に全てが収まるように調整してくれる。
 cover  縦横比を保持したまま、要素を覆い尽くすサイズにしてくれる。

background-repeatで背景画像の繰り返しを設定しよう

背景画像の繰り返したい時は、background-repeatを使います。以下のように設定してみましょう。

HTML

CSS

表示イメージ

初期設定では、background-repeatがrepeatで設定されているので上記のように表示されます。

例えば、repeat-yを設定すると、

HTML

CSS

表示イメージ

このように縦に繰り返されます。

background-repeatの種類

repeat  全方位に繰り返す(デフォルト)。
 repeat-x  横方向に繰り返す。
 repeat-y  縦方向に繰り返す。
 no-repeat  繰り返さない。

基本的には、繰り返さない設定no-repeatでOKです。

background-positionで背景画像の位置を設定しよう

背景画像の位置を決めたい時は、background-positionを使います。例えば以下のように記述してみましょう。

HTML

CSS

表示イメージ

centerとrightを設定することで、右端の中央に背景画像を配置する事ができました。

background-positionの書き方
background-position: ( 横の位置, 縦の位置 )

横の位置、縦の位置として指定できる値は、centerleftrighttopbottomがあります。数値(%)またはpxで指定する事もできる。

background: lineargradientでグラデーションの背景を設定しよう

グラデーションの背景を指定したい時は、linear-gradientを使いましょう。

HTML

CSS

表示イメージ

background: linear-gradientの書き方
background:  linear-gradient( 色の変化する方向, 開始色,  中間色, 終了色 );
※中間色は、複数色入れる事もできる

このように綺麗なグラデーションで背景が表示されます。

まとめ

いかがでしたか?

今回は、backgroundプロパティを使って背景を設定する方法をご紹介しました。

この記事を読めば、自由自在に背景をつくることができるようになるでしょう。ぜひ参考にしてみてください。