CSS #13 背景のスタイル

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回は「背景」のスタイルについての内容です。

 

 

こちらのhtmlにスタイルをあてていきます。

 

 

背景のプロパティは種類がたくさんありますので、
一つずつ見ていきましょう。

 

 

background-color

まずはbackground-colorですが、こちらは背景色を指定できるプロパティになります。

 

 

今回はbodyを指定しているので、背景全体がスカイブルーになります。

 

 

 

background-image

次にbackground-imageは、背景画像を設定できるプロパティになります。

 

 

このように指定すると、指定した画像が何回も繰り返されて
背景が敷き詰められているかと思います。

 

 

 

background-repeat

次にbackground-repeatは、背景画像のリピートを指定することができるプロパティになります。

 

先ほどはこちら何も指定していなかったので、同じ画像が敷き詰められていましたが、
1個だけ出したい時は「no-repeat」を指定すればOKです。

 

 

こうすると、背景画像が一回だけ繰り返されるようになります。

 

 

 

background-position

次にbackground-positionは、背景画像のポジションを指定することができるプロパティになります。

 

left, center, rightや、
top, center, bottom といった位置を表すキーワードで指定するか、

%や数値でも指定することが可能です。

 

 

こう指定すると、背景画像が右上に表示されます。

 

 

 

background-attachment

次にbackground-attachmentは、背景画像の固定・移動を指定できるプロパティになります。

 

デフォルトは「scroll」になっていて、
画面のスクロールに伴って、背景画像も移動します。

 

このように「fixed」と指定すると、
背景画像の位置が固定され、スクロールしても動かなくなります。

 

 

 

background

上記のプロパティをまとめて、backgroundで1行で書く事もできます。

 

 

こちらはbackground-attachmentで書かれているソースと同じ表示になります。

 

 

 

 

 

 

 

 

今回は「背景」のスタイルについてやっていきました。

次回は「配置」についてです。

 

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る