|
{background-repeat:表示方法;}でページの背景画像の表示方法を
指定することが出来ます。
■ 背景画像の表示方法
ページの背景画像の表示方法は以下の通りです。
| 表示方法 | 説明 |
| repeat | 縦方向と横方向に背景画像を繰り返して表示します。（デフォルト） |
| repeat-x | 横方向だけ繰り返して表示します。 |
| repeat-y | 縦方向だけ繰り返して表示します。 |
| no-repeat | 背景画像を繰り返さず画像を1枚だけ表示します。 |
【ブラウザ表示】
サンプル4
サンプル5
サンプル6
ソース
<body class="sample4">サンプル4</body>
<body class="sample5">サンプル5</body>
<body class="sample6">サンプル6</body>
外部ファイル
body.sample4{
background-image:url(../image/ichigo.gif);
background-repeat:repeat-x;
}
body.sample5{
background-image:url(../image/ichigo.gif);
background-repeat:repeat-y;
}
body.sample6{
background-image:url(../image/ichigo.gif);
background-repeat:no-repeat;
}
<body>タグに直接記入する場合
<body style="background-image:url(../image/ichigo.gif);
background-repeat:repeat-x;">
サンプル4
</body>
<body style="background-image:url(../image/ichigo.gif);
background-repeat:repeat-y;">
サンプル5
</body>
<body style="background-image:url(../image/ichigo.gif);
background-repeat:no-repeat;">
サンプル6
</body>
■ その他の項目
・
ページに背景色や壁紙を指定する
・
背景画像を固定する
・
背景画像の表示位置を指定する
・
マウスカーソルの形を変える
・
ページ内の余白を指定する
・
スクロールバーの色を指定する
スタイルシート一覧のページに戻る
|
