前回はちょこっと背景色のみ変えてみる事をやってみました。
------------------------------ test.html
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>私のサイト</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<h1>大見出しタグ</h1>
<p><img src="test.jpg" width="64" height="64" alt="test">段落のテスト</p>
</body>
</html>
------------------------------
------------------------------- style.css
body {
background-color: #999;
}
-------------------------------
こちらのhtmlの部分で仮に作った画像部分にペイントなどで作った「test.jpg」をリンクさせてみましょう。
<img src="test.jpg" width="64" height="64" alt="test">段落のテスト
の部分を「image」フォルダに入れた「test.jpg」とリンクする為に
<img src="image/test.jpg" width="64" height="64" alt="test">段落のテスト
とします。
ここでは画像の大きさは無視していますが、フォルダ内に入れた画像を選択し、詳細を見ると大きさが表示されていますので、そのサイズを入力します。
width：幅とheight：高さ ａｌｔ：画像がなんであるかの説明となります。
このように画像ファイル名をそのまま入れるのはＮＧです。音声ブラウザで読み込むときのテキストとなりますから、とくに意味のない場合は””（何も入れない）にしておきます。
つぎに、背景をこの画像を敷き詰める設定にしてみましょう。
------------------------------- style.css
body {
background-image: url("../image/test.jpg");
}
-------------------------------
先ほどの画像が区別付かなくなりましたが(笑
背景が同じ画像で埋まりました。
このように小さな画像を前面に埋める他、横一列、縦一列などだけ表示させることもＣＳＳでは可能です。
このように縦に長いグラデーション（ペイントではグラデーションが使えないのでエアブラシで）のような画像を作り、imageフォルダに「ｂｇ．ｊｐｇ」で保存しましょう。
保存時に拡張子が大文字になってしまった場合は小文字に変えて下さい。
表示に問題は無くてもＨＴＭＬの種類によっては正しくないので、初めから大文字と小文字は区別して書くようにしましょう。
画像が準備できたら早速ＣＳＳに記述してみます。
------------------------------- style.css
body {
background-color: #decfc5;
background-image: url("../image/bg.jpg");
background-repeat: repeat-x;
background-position: top left;
}
-------------------------------
ファイル名は変わりましたが、画像のリンクは同じです。
その下のrepeatはｘ軸方向に繰り返すという意味
その下のpositionは画像のセット位置（上の左から）という意味です。
背景色をグラデーションの下の色と同じにするとその下を背景色で塗りつぶして画像との境目が無くなります。
こんな感じになります。
ペイントでは色の確認ができないので、カラーを調べたいときには「カラーピッカー」などのツールが必要になったりします。
グラデーションなども使えると便利なので、フリーソフトで良いのでもっていると便利です。
http://www.fenrir.co.jp/pictbear/
フリーのペイントソフトとでＰｉｃbearやＧＩＭＰなどを入れておきましょう。