ホームページで背景を設定する

ページ全体の背景色を設定します

body要素にページの背景色を追加します。

<body bgcolor=""> 〜 </body>
の部分にはカラーネームかRGB値を入れます。
<body bgcolor="カラーネームRGB値"> 〜 </body>

何も指定しなければ、"白"になります。(ブラウザのデフォルト値です)

上記のように要素に直接記述する方法もありますが、スタイルシートに記述することを推奨しています。

ページ全体の背景色をスタイルシートで設定

<head>と</head>の間に下記のように記述します。

ページの全体の背景色を#ffcc99にする ↓↓
<style type="text/css">
<!--
body {background-color:#ffcc99;}
-->
</style>
ページ全体の背景色を#666666にして、文字色を#fffffにする ↓↓
<style type="text/css">
<!--
body {
background-color:#666666;
color:#ffffff;
}
-->
</style>

カラーチャートはこちらを参照

ページ全体の背景に画像(壁紙)を使う

body要素にページの背景画像のファイル名を追加します。
<body style="background-image: url(画像のファイル名);">
上記のように要素に直接記述する方法もありますが、スタイルシートに記述することを推奨しています。



ページの背景画像(壁紙)を abc.gif というファイル名の画像にする↓↓
<head>と</head>の間に下記のように記述します。
<style type="text/css">
<!--
body {background-image: url(abc.gif); }
-->
</style>
ページの背景画像に abc.gif というファイル名の画像を使用し、文字色を#fffffにする ↓↓
<style type="text/css">
<!--
body {
background-image: url(abc.gif);
color:#ffffff;
}
-->
</style>

大きい画像(壁紙)は、重いページになり、表示速度が極端に遅くなります。重いページは嫌われます。せっかくの訪問者を帰してしまう結果になるかも・・・

背景画像の並べ方はこちらで詳しく説明しています。



●当サイトのソースは、IE6.0+のみ動作確認をしております。 それ以外のブラウザ、特にネットスケープでは正しく作動しない場 合がございます。ご了承下さい。


★skip ページtop

ページ全般

背景を小粋に変える


ホームページを小粋に
css
java
home