背景

背景に関する設定を行う．

背景の設定

background-colorプロパティ

要素の背景の色を指定する．

適用できる要素すべての要素
継承しない
テンプレート 
background-color: 値;
指定できる値値の効果
色指定した色になる．
transparent透明になる．
CSSの例文 
p.background-color{
background-color: yellow;
}
XHTMLの例文 
<p class="background-color">
黄色
</p>
出力結果

黄色

background-imageプロパティ

背景画像を指定できる．

適用できる要素すべての要素
継承しない
テンプレート 
background-image: 値;
指定できる値値の効果
url(URL)背景を指定したURLの画像にする．
none背景画像なし．
CSSの例文 
p.background-image{
background-image: url(../../gif/bluestar.gif);
}
XHTMLの例文 
<p class="background-image">
画像
<br />
画像
<br />
画像
</p>
出力結果

画像
画像
画像

background-repeatプロパティ

背景画像のくり返し方を指定する．

適用できる要素すべての要素
継承しない
テンプレート 
background-repeat: 値;
指定できる値値の効果
repeat背景画像を縦方向・横方向に繰り返し表示する．
repeat-x背景画像を横方向にのみ繰り返し表示する．
repeat-y背景画像を縦方向にのみ繰り返し表示する．
no-repeat背景画像を繰り返さず，1枚だけ表示する．
CSSの例文 
p.background-repeat{
background-image: url(../../gif/bluestar.gif);
background-repeat: repeat-y;
}
XHTMLの例文 
<p class="background-repeat">
画像
<br />
画像
<br />
画像
</p>
出力結果

画像
画像
画像

background-attachmentプロパティ

背景画像を固定する．

適用できる要素すべての要素
継承しない
テンプレート 
background-attachment: 値;
指定できる値値の効果
fixedブラウザをスクロールしても背景画像が動かずに固定される．
scrollブラウザをスクロールするとともに背景画像も移動する．
CSSの例文 
p.background-attachment{
background-image: url(../../gif/bluestar.gif);
background-attachment: fixed
}
XHTMLの例文 
<p class="background-attachment">
<br />
画像
<br />
画像
</p>
出力結果


画像
画像

background-positionプロパティ

画像を好きな場所に表示する．

テンプレート 
background-position: 値 値;
適用できる要素すべての要素
継承しない
指定できる値値の効果同等の効果をもつ別の値
横% 縦% 横方向は左から，縦方向は上から指定した値に画像を表示する．
長さ(横) 長さ(縦) 指定した長さの単位で横方向は左から，縦方向は上から指定した値に画像を表示する．
left top横方向は左端に，縦方向は上端に表示する．top left, 0% 0%
center top横方向は中央に，縦方向は上端に表示する．top center, center, 50% 0%
right top横方向は右端に，縦方向は上端に表示する．top right, 100% 0%
left center横方向は左端に，縦方向は中央に表示する．center left, left, 0% 50%
center center横方向は中央に，縦方向は中央に表示する．center, 50% 50%
right center横方向は右端に，縦方向は中央に表示する．center right, right, 100% 50%
left bottom横方向は左端に，縦方向は下端に表示する．bottom left, 0% 100%
center bottom横方向は中央に，縦方向は下端に表示する．bottom center, bottom, 50% 100%
right bottom横方向は右端に，縦方向は下端に表示する．bottom right, 100% 100%

1つの値のみを指定するものもある．

CSSの例文 
p.background-position{
background-image: url(../../gif/bluestar.gif);
background-repeat: no-repeat;
background-position: right top;
}
XHTMLの例文 
<p class="background-position">
画像
<br />
画像
<br />
画像
</p>
出力結果

画像
画像
画像

backgroundプロパティ

背景のプロパティをまとめて表示する．

適用できる要素すべての要素
継承しない
テンプレート 
background: ;
指定できる値値の効果
background-colorの値 background-imageの値 background-repeatの値 background-attachmentの値 background-positionの値5つの値をそれぞれ指定することで，上で記述したそれぞれの効果が表れる．並べる順番に決まりはなく，必要のないプロパティの値は省略してもよい．
CSSの例文 

p.background{
background: url(../../gif/bluestar.gif) fixed center bottom no-repeat;
}
XHTMLの例文 
<p class="backgroundt">
<br />
画像
<br />
画像
</p>
出力結果


画像
画像