Title

backgroundとは

background とはの次の意味をもつ語句です。

background

読み: バックグラウンド
意味: 背景、景色

目次に戻る

backgroundの概要

このプロパティはHTML文書の要素に背景色や背景の画像に関連する、様々な設定を連続記述の一括指定形式で設定することができます。

そもそも、backgroundプロパティに限らず、CSSには特定の分野の設定を一括の記述で指定できるプロパティが存在しており、 これは、その中の背景に関する設定を総合で担っているプロパティとなります。

目次に戻る

実機サンプルとサンプルコード

構文

セレクター{background: 設定値 設定値 ...}

目次に戻る

background関連のプロパティ初期値

このbackgroundプロパティは要素の背景に対しての設定を一括で行うために使用されるので、 他のbackgroundに関連するプロパティの値を半角スペースで区切りながら、連続で設定値を書いていきます。 まずは、その関連プロパティの初期値から見ていきましょう。

background-color: transparent

このプロパティは要素の背景色を設定するためのプロパティです。 初期値のtransparent とはトランスペアレントと読み、「親を通過する」という意味になります。 つまり親の背景色が通過するということになり、透明色を意味します。 このサンプルでは子要素にtransparentを設定しています。

div{background-color: transparent;}
div{background: transparent;}

上記コードの1行目と2行目は同じ意味になります。 詳しくは、 background-color のページをご覧ください。

目次に戻る

background-image: none

このプロパティは要素の背景画像を設定するためのプロパティです。 初期値のnone とはノンと読み、「なし」という意味になります。 つまり、背景画像を指定しないということです。

div{background-image: none;}
div{background: none;}

上記コードの1行目と2行目は同じ意味合いになります。 詳しくは、 background-image のページをご覧ください。

目次に戻る

background-attachment: scroll

このプロパティは要素の背景画像の固定方法を指定するためのプロパティです。 初期値のscroll とはスクロールと読み、「巻く」とか「巻物」という意味になります。 コンピューターの用語からすると画面移動のことをスクロールといいますが、これは背景画像が画面移動に 対して同時にスクロールするということになります。

div{background-attachment: scroll;}
div{background: scroll;}

上記コードの1行目と2行目は同じ意味合いになります。 詳しくは、 background-attachment のページをご覧ください。

目次に戻る

background-repeat: repeat

このプロパティは背景に使用された画像のが途切れた場合に繰り返し画像を表示するかを指定します。 初期値のrepeat とはリピートと読み、「繰り返し」という意味になります。

div{background-repeat: repeat;}
div{background: repeat;}

上記コードの1行目と2行目は同じ意味合いになります。 詳しくは、 background-repeat のページをご覧ください。

目次に戻る

background-size: auto auto

このプロパティは背景に使用された1画像辺りのサイズを指定します。 初期値のauto とはオートと読み、「自動」という意味になります。 これは親要素のサイズを基準に100%の自動調整で画像が表示されます。 なお、「auto auto」とautoが2回繰り返しているのは「左側が画像の横幅」で「右側が画像の高さ」を指定しています。 つまり横幅と高さを自動で調整しているということになります。

div{background-size: auto auto;}

詳しくは、 background-size のページをご覧ください。

目次に戻る

background-origin padding-box

このプロパティは背景に使用される画像の書き出し位置を指定することができます。 初期値のpadding-boxは境界線の内側にある余白領域を基準にして、画像の書き出しをします。 このサンプルでは表示位置の違いを分かりやすくするために境界線を太い点線で表示しています。 なお、このプロパティはbackground-repeatプロパティで画像のリピート表示をしないように設定しておかないと違いが分かりづらいです。

div{
	border: 10px dashed black;
	background-repeat: no-repeat;
	background-origin: padding-box;
}

詳しくは、 background-origin のページをご覧ください。

目次に戻る

background-position: 0% 0%

このプロパティは背景に使用される画像の書き出し位置を調整することができます。 初期値の0%はbackground-originプロパティで設定された位置を基準にして、相対位置で指定します。 このサンプルでは表示位置の違いを分かりやすくするために横位置10%,縦位置20%の位置にしています。 なお、このプロパティはbackground-repeatプロパティで画像のリピート表示をしないように設定しておかないと意味がありません。

div{
	background-origin: padding-box;
	background-repeat: no-repeat;
	background-position: 10% 20%;
}

詳しくは、 background-position のページをご覧ください。

目次に戻る

background-clip: border-box;

このプロパティは背景に使用される画像が、要素のどの領域まで拡張されるかを指定できます。 初期値のborder-boxは境界線の領域まで、画像の表示を拡張します。 このサンプルでは表示の拡張の違いを分かりやすくするために境界線を太い点線で表示しています。

div{
	border: 20px dashed black;
	background-clip: border-box;
}

詳しくは、 css: background-clip のページをご覧ください。

目次に戻る

backgroundプロパティの使用例 (検証)

ここでは、前章までで説明してきた各プロパティの設定を、backgroundプロパティを実際に使って、一括で設定の検証を行ってみたいと思います。

div{
	width: 200px;
	height: 200px;
	border: 10px dashed black;
	background: khaki no-repeat 10px 10px/190px url(画像のURL);
}

• div要素を使用
• 要素の横と縦の幅は200px
• 要素の境界線を10pxの点線にして、線の色は黒
• background(背景の設定)
  • background-color: khaki
  • background-repeat: no-repeat
  • background-position: 10px 10px
  • background-size: 190px
  • background-image: url(画像のURL)

background: 背景色□リピート有無□Xポジション□Yポジション/サイズ□url(画像のURL);

目次に戻る

補足説明

• すべての要素に適用可能

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background: blue;

background: padding-box #00FF00;

background: border-box rgb(255,255,0);

background: padding-box linear-gradient(#2CF,#6F8,#FEA);

background: content-box radial-gradient(blue, skyblue);

background: url('../images/soccer-ball.png') repeat-x 0px 0px/30px;

目次に戻る