背景のスタイル
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 | 右端 |
人が登録