CSS～背景に関するスタイルのプロパティ～
CSSのプロパティbackgroundとは？
backgroundはCSSの背景に関するスタイルのプロパティです。
ここではCSSの背景に関するプロパティを紹介していきます。
CSSとは？
CSSとはCascading Style Sheets（カスケーティング・スタイルシート）の頭文字をとったものであり、スタイルシートとも呼ばれています。
HTMLは見出しやヘッダ情報などWebページの文書構造を形成するための言語であるのに対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を持っています。
WebページはHTMLとCSSで作成されており、CSSはWebページを作成するためにも大きな役割を持っています。
プロパティ
CSSのプロパティは関連付けられた値によりブラウザがどのように要素を表示するかを定義する特性です。
CSSのプロパティには様々なものがあります。
文字に関するスタイルのプロパティではcolor（文字の色）、font-size（文字の大きさ）などがあります。
枠線に関するスタイルのプロパティではborder（枠線）などがあります。
一部のプロパティを簡単にですが紹介しました。この記事のメインである背景に関するスタイルのプロパティを紹介していきます。
背景に関するスタイルのプロパティ
背景に関するスタイルのプロパティにも様々なものがあります。
background
{ background : -color -repeat -position -attachment -image -clip -size -origin; }backgroundプロパティは、背景関連のプロパティをまとめて指定することが出来ます。
必要な値を半角スペースで区切り、順不同で指定します。初期値は各プロパティに準します。
背景関連で指定していない値は、現状維持ではなく初期値にリセットされます。
使用例
body{
background : white no-repeat center;
}background-color
{ background-color :値;} 要素の背景色を指定するには、このプロパティの値に色を指定します。
初期値は透明であることを示す「transparent（透明）」です。
ページ全体の背景色を指定するには、body要素の背景色を指定します。
使用例
body{
color:white;
background-color:black;
}background-image
{ background-image : 値;} 要素の背景画像を指定するには、このプロパティの値にurl()の形式で画像ファイルの場所を指定します。
初期値は「none」で背景画像は表示されない状態となっています。
CSS3からはカンマで区切ることで複数の背景が画像が使用でき、左側に指定されている画像ほど上になって表示されることが可能となっています。
使用例
body{
background-image: url(images/ph.jpg);
}background-repeat
{ background-repeat : 値;} 要素の背景画像の繰り返しに関する設定は、このプロパティにて行います。
値に「repeat」と指定すると、画像は縦横に繰り返し表示され、「no-repeat」にすると繰り返しません。
画像を横方向だけに繰り返し表示するる「repeat-x」、画像を縦方向だけに繰り返し表示する「repeat-y」などがあります。
使用例
body{
background-image: url(images/ph.jpg);
background-repeat: repeat-y;
}background-position
{ background-position : 値;} 要素の背景画像の表示位置に関する設定は、このプロパティにて行います。
値は1つ、または半角スペースで区切って2つ指定でき、1つの場合は水平・垂直位置の両方、2つの場合は水平位置、垂直位置の順の指定になります。
カンマ（,）で区切って複数の画像の位置を指定できます。
値には％数値、任意の数値+単位がはいります。
また、垂直0％とする「top」、水平100%とする「right」、垂直100%とする「bottom」、水平0%とする「left」、水平50%、垂直50%とする「center」も指定できます。
初期値は0％、0％です。
使用例
body{
background-image: url(images/ph.jpg);
background-repeat: repeat-y;
background-position: right top;
}background-size
{ background-size : 値;} 背景画像の表示サイズに関する設定は、このプロパティにて行います。
値には、「cover」,「contain」、「auto」、任意の数値+単位、％値が指定できます。
「cover」を指定すると縦横比を保ったまま、背景画像が領域をすべてカバーする表示サイズに調整されます。
「contain」を指定すると縦横比を保ったまま、背景画像が領域に収まる表示サイズに調整されます。
「auto」を指定すると背景画像の表示サイズが自動的に調整されます。
任意の数値＋単位を指定するときは背景画像の幅と高さを半角スペースで区切り、単位付きの数値で指定します。1つだけ指定した場合は、2つ目の値はautoとなります。
%値を指定するときは背景画像の幅と高さを半角スペースで区切って、%値で指定します。値は背景画像を表示する領域に対する割合となり、1つだけ指定した場合は、2つ目の値はautoになります。
初期値はautoです。
使用例
body{
background-image: url(images/ph.jpg);
background-repeat: repeat-y;
background-position: right top;
background-size: cover;
}background-attachment
{ background-attachment : 値;} ページをスクロールしたときの背景画像の表示方法を指定するにはこのプロパティの値に「scroll」、「fixed」、「local」を指定します。
「scroll」を指定すると背景画像も一緒にスクロールされます。
「fixed」を指定すると背景画像は固定されます。
「local」を指定すると背景画像は指定された要素の領域に固定され、また領域にスクロール機能がある場合は、内容と一緒に背景画像もスクロールされます。
初期値は「scroll」となります。
body{
background-image: url(ph.png);
background-repeat: repeat-y;
background-attachment: fixed;
}background-origin
{ background-origin : 値;} 背景画像をボックスに表示する基準位置を指定するにはこのプロパティの値に「border-box」、「padding-box」、「content-box」を指定します。
「border-box」を指定するとボーダーを含めた要素の端を基準にします。
「padding-box」を指定するとボーダーを除いた要素の内側の領域を基準にします。。
「content-box」を指定するとボックス内の余白を含まない、要素の内容領域（コンテンツ領域）を基準にします。
初期値は「padding-box」となります。
background-attachmentプロパティの値がfixedの場合、このプロパティの指定は無効となるため注意が必要です。
background-origin
{ background-origin : 値;} 背景画像を表示する領域を指定するにはこのプロパティの値に「border-box」、「padding-box」、「content-box」を指定します。
「border-box」を指定するとボーダーを含めた要素の端まで表示されます。
「padding-box」を指定するとボーダーを除いた要素の内側の領域に表示されます。
「content-box」を指定するとボックス内の余白を含まない、要素の内容領域に表示されます。
初期値は「border-box」となります。
まとめ
CSSの背景に関するプロパティの説明をしました。
この記事が少しでも参考になれば幸いです。