【ページの背景画像】



■ページの背景画像を指定する
<style type="text/css">
<!--

body { background-image:url(bg.gif); }
-->
</style>

ページ全体の背景画像を指定するにはスタイルの定義でbodyにbackground-image:url(表示する画像のURL);のようにします

■ページの背景画像を固定する
<style type="text/css">
<!--

body { background-attachment:fixed; }
-->
</style>

ページの背景画像を固定するにはスタイルの定義でbodyにbackground-attachment:fixed;のようにします。固定させないのであればfixedでなくscrollを指定します。 必ず<head>の中に書いてください。

■ページの背景画像を一枚だけ表示する
<style type="text/css">
<!--

body { background-repeat:no-repeat; }
-->
</style>

ページの背景画像を固定するにはスタイルの定義でbodyにbackground-repeat:no-repeat;のようにします。表示する位置をpositionで指定しない場合は左上を基準として表示します。 必ず<head>の中に書いてください。

■ページの背景画像を縦方向にだけ繰り返し表示する
<style type="text/css">
<!--

body { background-repeat:repeat-y; }
-->
</style>

ページの背景画像を縦方向に繰り返し表示するにはスタイルの定義でbodyにbackground-repeat:repeat-y;のようにします。 必ず<head>の中に書いてください。

■ページの背景画像を横方向にだけ繰り返し表示する
<style type="text/css">
<!--

body { background-repeat:repeat-x; }
-->
</style>

ページの背景画像を縦方向に繰り返し表示するにはスタイルの定義でbodyにbackground-repeat:repeat-x;のようにします。 必ず<head>の中に書いてください。

■背景画像を一枚だけページの中央に表示する
<style type="text/css">
<!--

body { background-repeat:no-repeat; background-position:50%; }
-->
</style>

ページの背景画像を中央に一枚だけ表示するにはスタイルの定義でbodyにbackground-repeat:no-repeat;background-position:50%;のように指定します。 必ず<head>の中に書いてください。

■背景画像を一枚だけページの右上に表示する
<style type="text/css">
<!--

body { background-repeat:no-repeat; background-position:100% 0%; }
-->
</style>

ページの背景画像を右上に一枚だけ表示するにはスタイルの定義でbodyにbackground-repeat:no-repeat;background-position:100% 0%;のように指定します。 必ず<head>の中に書いてください。

■背景画像を一枚だけページの左下に表示する
<style type="text/css">
<!--

body { background-repeat:no-repeat; background-position:0% 100%; }
-->
</style>

ページの背景画像を左下に一枚だけ表示するにはスタイルの定義でbodyにbackground-repeat:no-repeat; background-position:0% 100%;のように指定します。 必ず<head>の中に書いてください。

■背景画像を一枚だけページの右下に表示する
<style type="text/css">
<!--

body { background-repeat:no-repeat; background-position:100% 100%; }
-->
</style>

ページの背景画像を右下に一枚だけ表示するにはスタイルの定義でbodyにbackground-repeat:no-repeat;background-position:100% 100%;のように指定します。 必ず<head>の中に書いてください。

■背景画像を一枚だけページの右上に固定して表示する
<style type="text/css">
<!--

body { background-repeat:no-repeat; background-position:100% 0%; background-attachment:fixed; }
-->
</style>

ページの背景画像を右上に一枚だけ表示しスクロールしても固定されたままにするにはスタイルの定義でbodyにbackground-repeat:no-repeat;background-position:100% 0%;background-attachment:fixed;のように指定します。必ず<head>の中に書いてください。

■背景画像を一枚だけページの右下に固定して表示する
<style type="text/css">
<!--

body { background-repeat:no-repeat; background-position:100% 100%; background-attachment:fixed; }
-->
</style>

ページの背景画像を右下に一枚だけ表示しスクロールしても固定されたままにするにはスタイルの定義でbodyにbackground-repeat:no-repeat;background-position:100% 100%;background-attachment:fixed;のように指定します。 必ず<head>の中に書いてください。

■背景画像をページの中央に繰り返し表示する
<style type="text/css">
<!--

body { background-repeat:repeat-y; background-position:50%; }
-->
</style>

ページの背景画像を中央に繰り返し表示するにはスタイルの定義でbodyにbackground-repeat:repeat-y;background-position:50%;のように指定します。 必ず<head>の中に書いてください。

■背景画像をページの右側に繰り返し表示する
<style type="text/css">
<!--

body { background-repeat:repeat-y; background-position:100%; }
-->
</style>

ページの背景画像を右側に繰り返し表示するにはスタイルの定義でbodyにbackground-repeat:repeat-y;background-position:100%;のように指定します。 必ず<head>の中に書いてください。

■ 背景画像をページの下側に繰り返し表示する
<style type="text/css">
<!--

body { background-repeat:repeat-x; background-position:0% 100%; }
-->
</style>

ページの背景画像を下側に繰り返し表示するにはスタイルの定義でbodyに background-repeat:repeat-x;background-position:0% 100%;のように指定します。 必ず<head>の中に書いてください。

■背景画像をページの左上から(200,80)ピクセルの位置に表示させる
<style type="text/css">
<!--

body { background-repeat:no-repeat; background-position:200px 80px; }
-->
</style>

背景画像をページの左上から(200,80)ピクセルの位置に表示させるにはbackground-repeat:no-repeat;で1枚だけの画像にし、background-position:200px 80px;として表示するX,Y座標を指定します。 必ず<head>の中に書いてください。




もどる

[★高収入が可能!WEBデザインのプロになってみない?! Click Here! 自宅で仕事がしたい人必見! Click Here!]
[ CGIレンタルサービス | 100MBの無料HPスペース | 検索エンジン登録代行サービス ]
[ 初心者でも安心なレンタルサーバー。50MBで250円から。CGI・SSI・PHPが使えます。 ]


FC2 キャッシング 出会い 無料アクセス解析