記事の内容
background-image
background-imageプロパティは、
背景画像を指定します。
colorプロパティ
<p></p>p {
background-image: url(○○/○○.拡張子) /* 画像リンク先/画像名.拡張子 */
width: 画像の横幅サイズ /* 画像サイズ指定(横幅) */
height: 画像の縦幅サイズ /* 画像サイズ指定(縦幅) */
}出力結果
初期設定では、
画像は繰り返し表示になります。
background-repeat
background-repeatプロパティは、画像の繰り返し表示に関して指定し以下の4種類から選択できます。
background-repeatに関して
| repeat | 縦横タイル状に繰り返して表示(初期値) |
| repeat-x | 横方向のみ繰り返して表示 |
| repeat-y | 縦方向のみ繰り返して表示 |
| no-repeat | 繰り返さずにひとつだけ表示 |
※タブを選択すると4種類の違いが確認できます。
<p></p>p {
background-image: url(○○/○○.拡張子);
background-repeat: repeat; /* 縦横タイル状に繰り返し */
height: 100px; /* 画像サイズ指定(縦幅) */
width: 100%; /* 画像サイズ指定(横幅) */
}出力結果