ＷＥＢリファレンス/ＣＳＳリファレン - 背景 background‐

back
名前解説サンプル
background-color背景色（RGB） #00CCFF
background-image背景画像 url('../img/34bar_sv.jpg')
background-repeat背景画像の繰り返し指定 repeat-x; ｘ方向に繰り返し
repeat-y; ｙ方向に繰り返し
repeat; 縦横繰り返し
no-repeat; 繰り返しなし
background-attachmentスクロール時の動作scroll; 一緒にスクロール
fixed; スクロールしない
background-position背景の位置をX座標/Y座標で指定するX: left center right
Y: top center bottom
共通：pt px pc | em ex | mm cm in | %

目次

全体の背景に画像を敷き詰める

body {
    background-image: url('../img/p01.jpg'); 
}
sample_1

全体の背景色を黒く塗りつぶす

body {
    background: #000000;
}
sample_2

Hタグの背景に画像を敷き詰める

h1 {
    background-image: url('../img/34bar_sv.jpg');
    background-repeat: repeat-x;
}
sample_3

ブロック要素に画像を敷き詰める

div.sample {
    background-image: url('../img/bg-green-wall.gif');
}
sample_4

ブロック要素の背景を塗りつぶす

div.sample {
    background-color: #99FFCC;
}
sample_5
TOPへ

back
inserted by FC2 system