その１

ページ全体に背景画像を繰り返しで敷き詰める

まず画像が問題ぢゃの。
ある画像でいいのぢゃが、なかったら、わしか助手の画像をCSS用のフォルダにダウンロードしておいてくだされ。
画像の上でマウス右クリック、名前をつけて保存ぢゃ。

にこにこ顔の助手

ページ全体ってことは、bodyの設定ですよね？

おっ！わかってきたようぢゃな。そうぢゃ。
では、さっそくいくぞい。わしは、説明の為に、style7.cssとtest7.htmlで試すが、みなさんは、今までのcssファイルを変更でもいいぞい。
今までのcssファイルを変更していくのなら、htmlの方に書く、呼び出しcssファイル名の変更はいらんからの。
下のは背景色も薄黄色にしてあるが。

body {
background-color: lightyellow;
background-image: url(jii0.gif);
color: black;
}

h1 {
text-align: center;
color: white;
background-color: green;
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

わ～～～～！！な、なんですか、これはっ！
くどすぎます！！

くどいとはなんぢゃ！くどいとわっ！失敬なっ！
・・・ぢゃが、しかし・・・確かにそうぢゃな/^-^;;

その２

・背景画像を１つだけ表示させる、上部１行、or　左横１列表示させる。

ということで、背景を引き詰めるのはやめて、他の方法にしよう。
青文字のところを追記ぢゃ！

body {
background-color: lightyellow;
background-image: url(jii0.gif);
background-repeat: no-repeat;
color: black;
}

h1 {
text-align: center;
color: white;
background-color: green;
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

にこにこ顔の助手
ほっ！よかった・・・これなら博士が一人。しかも大見出しに隠れてみえない（笑

こりゃ！見えなくなって笑うとは何事ぢゃっ！
ったく・・・これぢゃから若いもんは礼儀がなってないと言うンぢゃ・・ブツブツ・・・

・・・ま、ここは広い心で流してぢゃな・・・・ごほん・・・
で、書き方としては、最初の行の背景色、背景画像、表示方法の３つをひとまとめにしてもいいんぢゃ。
background: yellow url(jii0.gif) no-repeat ;
指定ごとに、半角スペースを空けるんぢゃぞ。

もひとつ紹介しておこうかのぉ。大きい画像なら、１枚だけでもいいと思うが、小さい画像だと寂しすぎるからのぉ。（笑

最初の敷き詰めた奴ぢゃが、ページ全体でなく上に１行のみ、は、
repeat　のところを、repeat-x　に、
左横に１列敷きたいときは、　repeat-y　とやるんぢゃ。
もちろん、これも続けて書いてもいいぞい。

body {
background: lightyellow url(jii0.gif) repeat-x ;
color: black;
}

h1 {
text-align: center;
color: white;
background-color: green;
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

repeat-x　とした時がこれで、　repeat-y　とした時が、これぢゃ。　

ま、いろいろテストしてみてくだされ。
↓こんなものとか？（どこを変えたか分かるかのぉ？）

body {
background: lightyellow url(jii0.gif) repeat-y ;
color: black;
}

h1 {
text-align: center;
color: white;
background: green url(jii0.gif) repeat ;
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

困った顔の助手
だから、こういういたずらはやめて欲しいんですけど・・・・

ひゃーっひゃっひゃっひゃっ！
年寄りの遊び心ぢゃ。そうダメ出ししないでもいいぢゃろ。（ケチ！

にこにこ顔の助手
繰り返しで使う画像は、敷き詰められてもくどくない画像、又は、模様などちぐはぐにならないような画像を選んで使ってくださいね。

無視しおったな？まったく！それでも助手か？！

その３

背景画像を表示する位置を指定

もうちょっとやるぞい。

にこにこ顔の助手

今日ははりきってますね？
自分をたくさん登場させようっていう魂胆ですか？

勝手に言っとれ！
わしは純粋にスタイルシートの勉強に協力しておるのにぢゃな・・・・そこんところがわかっとらん！

まー、そう怒っておっても進まんから、ほっぽっといて進めるとしよう。

背景画像の位置指定も、実はいろいろできるんぢゃ。
下のcssを見てくだされ。
画像が隠れておっても確認がしっかりできんからの、大見出しの背景色はなしにしておいたぞい。

body {
background-color: lightyellow;
background-image: url(jii0.gif);
background-repeat: no-repeat;
background-position: 100% 0%;
color: black;
}

h1 {
text-align: center;
color: green;
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

注目すべき箇所は、no-repeatを指定した次の行の、background-position: 100% 0%;　ぢゃ。
これは、ブラウザの大きさを１００％として、左から１００％の割合の位置（つまり右隅になるのぢゃが）＆上から０％、上端に表示しろという意味なんぢゃ。
論より証拠ぢゃな。これを見てくだされ。

そして、１００％と０％のところを変えてテストしてみてほしい。

最初の％がブラウザの左からの位置、２番目の％が上からの位置ぢゃ。
pxで指定してもいいんぢゃぞ。200px　50px　とか。
２つの指定の間には、半角スペースを入れておいてくだされ。でないと、どこまでが指示語なのかＰＣは判断できないのぢゃ。

でもって、こんな組み合わせも実際に入力してどの位置に背景画像が表示されるか、様子を見てくだされや。

上の表のCSSの　100%　と　0%　の部分にそれぞれ入れ替えるんぢゃ。

↓これらが、簡単位置指定セットぢゃ（笑
left bottom
right bottom
left top
right top
center center

つまり

background（背景）-（の）position（位置）:（は） ●（左からの位置）半角スペース▲（上からの位置）;（です）

●＝　left　right　center　%　px　
▲＝　top　botom　%　px　

例：

body {
background-color: lightyellow;
background-image: url(jii0.gif);
background-repeat: no-repeat;
background-position: center center;
color: black;
}

h1 {
text-align: center;
color: green;
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

その４

背景を動かないようにする

ページの記事が長い場合、スクロールバーを動かして下の方まで読もうとすると、普通の背景画像は、一緒についていってしまうのぉ。
繰り返し表示されておれば、繰り返して表示されるが、１行だけとか１枚だけの場合だと、見えなくなってしまう。
ブログにもあるんぢゃが、背景画像ごとページをスクロールさせずに、背景を固定して、ページに書いてある記事部分だけスクロールという表示方法も見たことがあると思う。

そのやり方はぢゃな、こう↓ぢゃ。

body {
background-color: lightyellow;
background-image: url(jii0.gif);
background-repeat: no-repeat;
background-attachment: fixed;
color: black;
}

h1 {
text-align: center;
color: green;
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

background-attachment: fixed;
の部分がないと、この場合は、no-repeat;　ぢゃから、下の方へ読んでいくと背景画像は見えなくなってしまうんぢゃ。
fixedがあれば、背景画像の位置はそのまま。ページの記事部分だけがスクロールしてくれるという訳ぢゃ。

一応参考までに→　fixedあり　と　fixedなし　で比べてみてくだされ。下にスクロールさせて違いを見るんぢゃぞ。
本来ならページ一面のとか、もっと背景らしい大きさの画像を使うんぢゃが、まー、そこは自分でやってみてくだされ。
自分でファイルを書き換えてやってみるのが一番分かるしのぉ。

さてと、今日はここまでぢゃ。お疲れさん。
次回は、多少は、webページらしいサンプルページを使うぞい。
質問、間違いなどのつっこみ、訂正指摘などは気楽にBBSへ書いてくだされ。
何しろ急いでやっておるから、間違っておるかもしれん・・（おいっ！