backgroundプロパティの基本
要素の背景には色または画像のいずれかを表示することができます。
ボックスモデルでのbackgroundプロパティは内容領域（コンテンツ）、パディング領域、に背景を設定することができます。
ボーダーの色とスタイルはボーダーのプロパティで設定されますが、実はボーダーの背後には背景色や背景画像が存在します。
また、マージンは常に透明です。
backgroundプロパティは継承されません。親ボックスの背景は、background-colorの初期値がtransparentのためデフォルトで透けて見えます。子要素に継承されたわけではありませんので間違わないようにしましょう。
ルート要素の背景は、ユーザーエージェント（ブラウザ）の表示部分全体の背景となります。それはマージン部分やスクロールバー部分を含みます。ルート要素の背景を設定する場合はhtml要素よりもbody要素に対してbackgroundプロパティを設定する方が望ましいとされています。
html要素に背景色を着けた例
margin領域をわかりやすいように大きくとっています。
html{
background-color:#FCF;
margin:50px;
border:1px solid red;
}
body要素だけにbackground-colorを指定したならば、body要素がルート要素の役割を果たしてユーザーエージェントいっぱいに背景色をつけます。
body要素に背景色を着けた例
body{
background-color:#FCF;
margin:50px;
border:1px solid red;
}
bodyに背景色を設定してもhtmlに背景色を設定しても同じような表示になります。けれども、両者の赤枠内の余白が変わっています。これは赤枠のボーダーをhtmlに設定した場合とbodyに設定した場合の違いです。htmlにボーダーを指定した場合には、bodyのマージン（ブラウザの初期設定マージン）が影響して赤枠を広げています。
html要素とbody要素の両方にbackground-colorを指定したなら、html要素がルート要素の役割を果たしてユーザーエージェントいっぱいに背景色をつけます。bodyに設定した背景色はマージン部分は透明となり下のhtml要素の背景色が見えます。ルート要素の役割を果たしたbodyとはマージンの振る舞いが変わることが確認できます。
tml要素とbody要素に背景色を着けた例
html{
background-color:#9CF;
margin:50px;
}
body{
background-color:#FCF;
margin:50px;
border:1px solid red;
}
＊＊ルート要素のマージンはまるでパディングのように内側に空白を取ります。
CSS2.1のbackgroundプロパティ
backgroundプロパティの種類
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
background-color
- background-color
-
値: <color> | transparent | inherit
初期値: transparent
適用対象: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
- このプロパティは、要素の背景色を設定します。color値またはtransparentキーワードのいずれかで設定します。
使用例
p {
background-color: #FFF;
}
background-image
- background-image
-
値: <uri> | none | inherit
初期値: none
適用対象: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 絶対URIまたはnone
-
このプロパティは要素の背景画像を設定します。背景画像を設定する場合、背景色の上にレンダリングされます。（背景色を設定すると背景色は画像の透明部分で表示されます）。
urlの先に画像データが無いなど、画像が使用できない場合に使用される背景色を指定しておきます。画像が使用可能である場合、背景色の上にレンダリングされます。（したがって、色は画像の透明部分で表示されます）このプロパティの値は、画像を指定する<uri>、または画像が使用されないnoneのいずれかを使用します。
body { background-image: url("back.gif") }
CSSで画像を表示する方法として、 「content プロパティ」により，画像を指定することで画像を設定することができます。けれどもHTML文章に意味を持たせる考え方から、重要な前景画像はHTMLでのタグを使用するべきものです。
.section:before{
content: url('images/rect.png');
}
background-repeat
- background-repeat
-
値: repeat | repeat-x | repeat-y | no-repeat | inherit
初期値: repeat
適用対象: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
-
背景画像を指定する場合は、画像が繰り返されるかどうか（タイル状）、そしてどのように繰り返すかを指定することができます。タイル状に繰り返すと、ボックスの内容、パディングとボーダー領域をいっぱいに覆います。
インライン要素の背景画像の敷き詰めと配置は、CSS2.1では未定義です。
background-repeatの値の説明
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
background-attachment
- background-attachment
-
値: scroll | fixed | inherit
初期値: scroll
適用対象: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
-
背景画像を指定した場合、このプロパティは、ユーザーエージェント（ブラウザ）の表示部分に固定されます（fixed）。
fixedはブラウザの表示領域の全体に対して固定されます。特定のブロック要素内で固定したい場合には使用できません。
ある特定のブロック要素の中に大きな1枚の画像を背景画像としてスクロールしても同じ部分に表示させたいという場合には、background-attachmentプロパティを使うのではなく、”background-repeat : no-repeat ;” を指定した上で、background-positionプロパティにパーセンテージ値（%）、または “left | right | center | top | bottom” のいずれかのキーワードを指定するようにします。これによりスクロールしてもブロック要素内での位置は常に同じ部分に表示することができます。
html{
height:100%;
}
body{
width:100％;
height:100％;
background-color:#FFC;
background-position: center;
background-image:url(cake1.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
fixedの背景をサポートしない（古いIEなど）ユーザーエージェントがあることを考慮する必要があります。
body {
background: white url(paper.png) scroll; /* すべてのユーザーエージェント */
background: white url(ledger.png) fixed; /* 固定背景にするユーザーエージェント */
}
background-position
- background-position
- 値: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
初期値: 0% 0%
適用対象: すべての要素
継承: no
パーセンテージ: ボックス自身の大きさを参照
メディア: visual
算出値: <length>は絶対値、そうでなければパーセンテージ
-
背景画像が指定されている場合、このプロパティはその背景画像の初期位置を指定します。1つの値だけが指定される場合、2番目の値はcenterとなります。少なくとも1つの値がキーワードでない場合は、最初の値は水平方向の位置を表し、2番目は垂直位置を表す。負の<percentage>と<length>値も使用可能です。
background-position: left 50%のサンプル
background-position: 50% 50% のサンプル
background-position: 10% 80%のサンプル
background-position:80px 640px のサンプルbackground-position: left top; /* 左上 */ background-position: 10px 20px; /* 左上から右に10px, 下に20px */ background-position: left; /* left center と同意 */ background-position: top; /* center top と同意 */ background-position: center; /* center center と同意 */ background-position: 50% 50%; /* center center と同意 */ background-position: left 50%; /* left center と同意 */
<percentage>
パーセント指定する場合は少し注意してください。
表示位置がXパーセント横（水平）またyパーセント下に（垂直方向）となり、画像の起点もXパーセント横（水平）またyパーセント下に（垂直）の位置に調整されます。つまり起点は常に変化するのです。
たとえば、0% 0%の値のペアでは、画像の左上角はパディングボックスの左上角に揃えて配置されます。100%100%の値のペアは、パディングボックスの右下隅に画像の右下隅を配置されます。10% 80%の値のペアは、画像の左から10%上から80%の点と、ボックスのパディング領域の左から10%上から80%の点を揃えます。
パーセントで指定した場合は特殊な動きになります。親要素に対して指定したｘ座標のパーセントとy座標のパーセントの位置に移動しますが、画像の起点も指定したパーセンテージの位置に変化していることに注目してください。
<length>
長さLは、画像の左上隅を要素のパディングボックスの左上隅から距離L右（水平）または下（垂直）の位置に調整します。たとえば、’2cm 1cm’の値のペアで、画像の左上隅から右に2cm、パディングボックスの左上隅から下に1cmに配置されます。
パーセント指定と違い、pxで指定した場合は画像の起点は常に左上になります。
- top
- 垂直位置0%に等しい。
- right
- 水平位置100%に等しい。
- bottom
- 垂直位置100%に等しい。
- left
- 水平位置0%に等しい。
- center
- 他の方法で与えられない場合は水平位置の50%に等しく、または垂直位置の50%に等しいです。
しかし、画像が固有の大きさでなく固有の比率を持つ場合、位置はCSS 2.1で未定義です。
body { background: url("banner.jpeg") right top } /* 100% 0% */ body { background: url("banner.jpeg") top center } /* 50% 0% */ body { background: url("banner.jpeg") center } /* 50% 50% */ body { background: url("banner.jpeg") bottom } /* 50% 100% */インライン要素の背景画像の敷き詰めと配置は、CSS2.1で未定義です。
背景画像がビューポート（’background-attachment’を参照）内に固定される場合、画像は要素のパディングボックスの代わりにビューポートに対して配置されます。
次の例では、イメージがビューポートの右下隅に配置されます。
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
- background
-
値: [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit
初期値: 個々のプロパティを参照
適用対象: すべての要素
継承: no
パーセンテージ: allowed on background-position
メディア: visual
算出値: 個々のプロパティを参照
-
backgroundプロパティは、スタイルシートの同じ場所で個別の背景のプロパティ（すなわち、background-color、background-image、background-repeat、background-attachment、background-position）を設定するための簡略化プロパティ(ショートハンド・プロパティ）です。
「background」プロパティは、まず初期値にすべての個別の背景のプロパティを設定し、宣言で指定された明示的な値を割り当てます。
値の記述の順番は決まっていません。
background
以下の例の最初の規則では、background-colorの値のみが与えられ、他の個別のプロパティは初期値に設定されます。2番目のp要素の設定で、すべての個別のプロパティが指定されます。p要素の設定でgrayを省略したなら初期値のtransparentが使われて背景色は透明となります。結果としてBODYの背景色の赤が表示され継承されたような錯覚に陥りますので注意してください。
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
コメント
[…] backgroundプロパティをちゃんと知りたいはこちら […]
[…] http://itstudio.co/2014/08/11/2945/ p要素にbackground-colorを指定してない場合、p要素の背景色は「透明」 background-colorの値は子要素に継承しない。 background-colorはbackground-image、borderの「背面」に存 […]