ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >ページ全体

背景画像の表示方法を指定する

{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>

■ その他の項目

ページに背景色や壁紙を指定する
背景画像を固定する
背景画像の表示位置を指定する
マウスカーソルの形を変える
ページ内の余白を指定する
スクロールバーの色を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.