おすすめ記事
背景画像
スポンサーリンク

あらすじ

ウェブサイト制作やホームページ制作において、ページの背景は非常に重要な要素の一つです。
 
ページの背景が見づらいだけで、ユーザーがページを離脱してしまう可能性だってありますし、逆に見やすければアクセス数も上がることだってあります。

 

そこで、今回はそんな背景を装飾する際に利用するCSSプロパティをご紹介していきたいと思います。

 

そもそもCSSが分からない!といった方はこちらの記事をご覧ください

 

スポンサーリンク

背景色を指定するbackground-colorプロパティ

 

color 背景色

 

background-colorプロパティとは、背景色を指定する際に利用するプロパティです。

 

色の指定方法はcolorプロパティと同じで、色の名前HEX値などの方法があります。

 

色の指定方法に関しての詳しい情報はこちらをご覧ください

 

実際の記載方法は下記の通りです。

 

記載方法background-color: green;

 

 

スポンサーリンク

背景画像を指定するbackground-imageプロパティ

 

背景画像

 

background-imageプロパティは、背景の画像だったり、グラデーションを反映させることができるプロパティです。

 

具体的には

  • url()
  • linear-gradient()
  • radial-gradient()

の3種類を指定することが出来ます。

 

url()

 

urlのあとのカッコ内には、画像のパス(保存先)を記載します。

 

具体的には

記載方法background-image: url (“画像のパス”)

 

といった風に記載します。

 

linear-gradient()

 

linear-gradientとは直線上にグラデーションを加える際に利用する値です。

 

()内には方向や色を指定することで、グラデーションを加えたい方向や加えたい色を指定することが出来ます。

記載方法background-color: linear-gradient (to right, red, pink, white);

 

といった場合は、赤:ピンク:白といった順番で、右方向に向かってグラデーションが加わります。

 

radial-gradient()

 

radial-gradientとは円形にグラデーションを加えることのできる値です。

 

()内には円形の形を指定できるcircle(円)とellipse(楕円形)のどちらかを選ぶことができ、デフォルトではellipse(楕円形)となっています。

 

また、色を指定することで色のグラデーションもlinear-gradient同様に加えることができます。

記載方法background-color: radial-gradient (circle, red, pink, white);

 

の場合だと、円の形をし、円の中心から赤、ピンク、白と外に向かっていくグラデーションの背景を表します。

 

背景画像の固定の有無を指定するbackground-attachmentプロパティ

 

固定

 

background-attachmentプロパティとは、背景の画像をスクロールした際に、スクロールに合わせて画像を移動させたり、固定させたりを選択することが出来ます。

 

基本的には

  • fixed
  • scroll

の2つがよく使われています。

 

fixed

 

fixedとは画面をスクロールしても画像の配置は変わることがないようにする際に指定する値です。

 

記載方法background-attachment: fixed;

 

scroll

 

scrollとはスクロールに合わせて画像も移動するように配置したい時に指定する値です。

 

記載方法background-attachment: scroll;

 

背景画像の位置を指定するbackground-positionプロパティ

 

位置

 

background-positionでは背景画像の位置を正確に指定することができます。

 

指定方法は

  • 方向(top, bottom, right, left)
  • 長さ(px, %)

といったものがあります。

 

方向(top, bottom, right, left, center)

 

方向はtop(上)、 bottom(下)、right(右)、left(左)、center(中央)の5つの内から組み合わせて指定することができます。

 

例えば、right topであれば右上に位置し、left bottomであれば左下となります。

 

また、leftやright、topといった、一単語での指定の場合は、自動的に

  • background-position: left center;
  • background-position: right center;
  • background-position: top center;
  • background-position: bottom center;

と、2つ目の値がcenterとなります。

 

長さ(px, %)

 

長さではpx(ピクセル)%(パーセント)を使用することができます。

 

左上をスタート地点とし、そこからの長さを指定することができます。

記載方法background-position: 10px (横) 10px (縦);

記載方法background-position: 50% (横) 70% (縦);

 

と、一つ目の値は左上から横に10px, 縦に10pxとなり、二つ目の値は左上から横に50%、縦に50%となります。

また、指定した初めの値は横の値になり、次の値は縦の値になります。

 

背景画像の繰り返し表示を指定するbackground-repeatプロパティ

 

繰り返し

 

background-repeatプロパティでは、背景画像の繰り返しを指定することができます。

 

主に、

  • repeat
  • no-repeat
  • repeat-x
  • repeat-y
  • space
  • round

といった要素を指定することができます。

 

repeat

 

このrepeatとは、その名の通り背景画像をリピートさせたい時に使用する値です。

 

デフォルトではこのrepeatが指定されています。

 

記載方法background-repeat: repeat;

 

no-repeat

 

このno-repeatとは背景画像を繰り返し表示させたくない際に使用します。

 

記載方法background-repeat: no-repeat;

 

repeat-x

 

repeat-xは背景画像を横に繰り返し表示させたい際に指定する要素です。

 

記載方法background-repeat: repeat-x;

 

repeat-y

 

repeat-yは背景画像を縦に繰り返し表示させたい際に指定する要素です。

 

記載方法background-repeat: repeat-y;

 

space

 

spaceを指定すると、画像は繰り返し表示され、画像と画像の間には均等にスペースができるよう配置されます。

 

記載方法background-repeat: space;

 

round

 

roundでは、spaceと同様に繰り返し表示されますが、画像と画像の隙間にはスペースはなく、びっしりと画像を配置することができます。

 

記載方法background-repeat: round;

 

背景画像のサイズを指定するbackground-sizeプロパティ

 

サイズ指定

 

背景画像のサイズを指定する方法には主に以下の方法があります。

 

  • auto
  • 長さ(Px, %)
  • contain
  • cover

 

それぞれについて詳しく見ていきます。

auto

 

autoはデフォルトの値となり、画像の元サイズを維持したまま表示させたい際に使用します。

 

記載方法background-size: auto;

 

長さ(px, %)

 

画像のサイズはpx(ピクセル)%(パーセント)で指定することができます。

 

記載方法background-position: 10px (横) 10px (縦);

記載方法background-position: 50% (横) 70% (縦);

 

contain

 

containとは日本語に訳すと含めるという意味になります。

 

この要素は画像が全て表示されるようにサイズ調整してくれる値となります。

 

記載方法background-position: contain;

 

cover

 

coverとは画面いっぱいに画像を表示する際の値です。

 

画像サイズがもともと小さいと、拡大した際に画像が荒くなるのが特徴です。

 

記載方法background-size: cover;

 

まとめ

いかがだったでしょうか。

 

背景の装飾だけでも色々な種類があるのをお分かりいただけたかと思います。

 

すベてを使いこなせるようになる必要はありませんが、一つでも覚えておくと便利ですので、ぜひ活用してみてください。

 

 

スポンサーリンク

Twitterでフォローしよう!

おすすめの記事