グラデーション壁紙スタイルシートサンプル

このページで配布している背景用画像は
<BODY BACKGROUND="line02.gif">
↑の様な普通の指定をすると↓こちらのようにグラデが細かく連続する「目が痛い・字が読みづらい」背景になります。
連続表示のサンプル。

こうならないようにするためには、スタイルシートで「左端にのみ」配置されるようにしてください。
このページのスタイルシートタグ記述例

↓こちらの画像をダウンロードしたら、
(画像の上にマウスカーソルを合わせて右クリック、開いたメニューの中から「名前を付けて保存」を選ぶ)

この背景を使いたいページに

<style type="text/css">
<!--
body{
background-color:#cef7d6;  /* 背景の色指定 */
background-image:URL(line02.gif);  /* 背景画像へのパス */
background-repeat:repeat-y;  /* 背景をY軸(縦方向)で繰り返し */
color:#000000;  /* フォントの色指定 */
}
-->
</style>

上記のスタイルシートの記述を、あなたのサイトの環境(画像の保管場所とか)に合わせて書き直し、
<HEAD>〜</HEAD>に記述してください。
するとこんな感じの表示になります。

なお、背景の色指定は、グラデーションの一番薄い部分と同じ色のカラーコードに合わせると効果的かと存じます。
(それぞれの画像の下に16進コードを付記しましたので、参考にしてください)
グラデーション1
青系(紺)

150x10 1.37kb
#BDBDFF
グラデーション2
赤系(濃桃)

150x10 1.42kb
#FFBDE7
グラデーション3
緑系1(若葉)

150x10 1.40kb
#cef7d6
グラデーション4
灰系(メタル)

150x10 1.37kb
#D9DCE3
グラデーション5
緑系2(青緑)

150x10 1.35kb
#BDE7E7
グラデーション6
紫系(赤目)

150x10 1.36kb
#E7BDDE
グラデーション7
黄系(山吹)

150x10 1.41kb
#EFE7B5
グラデーション8
橙系(赤銅)

150x10 1.38kb
#EFCEB5


こっちは「右端にのみ」用です。
グラデーション9
青系(紺)

150x10 1.37kb
#BDBDFF
グラデーション10
赤系(濃桃)

150x10 1.42kb
#FFBDE7
グラデーション11
緑系1(若葉)

150x10 1.40kb
#cef7d6
グラデーション12
灰系(メタル)

150x10 1.37kb
#D9DCE3
グラデーション13
緑系2(青緑)

150x10 1.35kb
#BDE7E7
グラデーション14
紫系(赤目)

150x10 1.36kb
#E7BDDE
グラデーション15
黄系(山吹)

150x10 1.41kb
#EFE7B5
グラデーション16
橙系(赤銅)

150x10 1.38kb
#EFCEB5


戻る