背景のスタイル
background-color
背景色を指定します。ページ全体や段落など、併用することも可能です。
CSSソース
body{
background-color: #00ff99;
}
background-color: #00ff99;
}
値 | 意味 | 説明 |
---|---|---|
transparent | 透過 | デフォルト |
RGB値 | #000000〜#ffffff | |
色名 | black、red、grayなど |
background-image
背景画像を指定します。ページ全体や段落など、併用することも可能です。 透過Gifなどを利用して、background-colorプロパティと併記することもできます。
CSSソース
body{
background-image: url('../design/img/bg.gif');
}
background-image: url('../design/img/bg.gif');
}
background-repeat
背景画像の繰り返しを指定します。
CSSソース
body{
background-repeat: repeat-y;
}
background-repeat: repeat-y;
}
値 | 意味 | 説明 |
---|---|---|
repeat | 縦横へ繰り返し | デフォルト |
repeat-x | 横へのみ繰り返し | |
repeat-y | 縦へのみ繰り返し | |
no-repeat | 繰り返しなし |
background-attachment
背景画像の固定を指定します。
CSSソース
body{
background-attachment: fixed;
}
background-attachment: fixed;
}
値 | 意味 | 説明 |
---|---|---|
scroll | スクロールとともに背景画像も移動 | デフォルト |
fixed | スクロールに依存せず背景画像を固定 |
background-position
背景画像の位置を指定します。 「値」に数字を記述する際は、「左端からの距離」「上端からの距離」の順で指定。マイナスの数値も可能です。
CSSソース
body{
background-position: center;
}
background-position: center;
}
値 | 意味 | 説明 |
---|---|---|
% | パーセント | |
px | ピクセル | ディスプレイの画素数 |
top | 上端 | |
center | 中央 | |
bottom | 下端 | |
left | 左端 | |
right | 右端 |