ここではhtml要素とbody要素の両方に背景を指定していますが、これはCSS2の仕様上おすすめできません。[2004.01.01.]
ですが、文書をapplication/xhtml+xmlとして送り出すのであれば問題ありません。[2004.06.29.]
今回のデザインは、オレンジ色のぐるぐる渦巻き、というイメージで作りはじめたんですが、シームレスでつながるぐるぐる渦巻きができなかったのでちょびっと方針転換して波みたいな模様にしました。
左の水鉄砲持った女の子の絵を固定する設定にしてあるのですが、なぜか Windows版 IE6 ではスクロールとともに流れていってしまいます。バックに模様を敷かなければ固定できるのですが。
スクリーンショットを用意しました。Mozilla 0.9.9 (Mac OS X) と Internet Explorer 6 (Windows98) です。たいして違いはないです。細かく見れば違うんですけどね。
CSSの解説もやっときましょう。
html要素の背景に模様を、body要素の背景に女の子の絵を、またレベル2の見出し(h2)で始まる各ブロックをdiv要素として背景に横縞模様を設定しています。ついでにh2要素の背景にも画像(女の子の顔)を敷いています。
以下、それぞれの部分のスタイルシートの指定です。全体は実際のシートを見てください。
html { background : #ef552c url(bg.png) repeat scroll; margin: 0; padding: 0; }
まず html です。2行目が背景(背景色、背景画像、画像の繰り返し、画像はスクロールする)の指定です。背景は仕様では全ての要素に指定できることになってるので遠慮は要りません(ブラウザによっては対応してくれないかもしれませんが)。あと念のためマージンとパディングの値に0を設定してます。
body { color: #fff; background : transparent url(doris.png) no-repeat fixed; margin: 0; padding: 5px 5px 5px 250px; }
つづいて body。2行目が文字色の指定、3行目が背景の指定です。ここで背景として画像を指定して、繰り返しなしで位置を固定しています。簡略化プロパティである"background"では、背景色は指定しなければ初期値の "transparent" が設定されるのですがとりあえず明示してあります。ほかに背景画像の位置も指定できるのですが今回は指定してません(ので、初期値である上から0、左から0の場所に表示されてます)。マージンは0、パディングは上右下左の順に指定してます。女の子の絵が幅250ピクセルほどなので、そのぶん左側をあけてあります。
h2 { background : #a90850 url(face1.png) no-repeat scroll right; color: #fff; font: 25px "ヒラギノ角ゴ Std W8"...(中略)...,sans-serif; margin: 0; padding: 0; height: 50px; }
見出しです。背景を紫色(#a90850)にしています。下になる部分の背景と違う色なので見出し部分に紫色の帯が敷かれることになります。さらに高さ50ピクセルで画像を作って右寄せに配置しています。また、要素の高さを heightプロパティで50ピクセルと明示して、画像と紫色の帯の高さがぴったりかさなるようにしてます。
今回は代替スタイルシートはありません。手がまわりませんでした。
webサイトづくりに役立ちそうなところを集めてみました。制作には直接関係ないのもあり。
HTMLやCSSの記述、背景の飾り画像やボタン画像類について権利は主張しません。使えると思ったらコピーするなりご自由にどうぞ。また当然リンクもご自由に好きなところに好きなだけどうぞ。
CGをご覧になりたい方はこちらへ 
このサイトについて
webサイトのデザインをいろいろ考えてみようかななどと突発的にでっち上げたサイトです。ようやく4つ目のデザインです。
デザインには今後ともカスケーディングスタイルシート(CSS)を使っていきます。いまさらテーブルでレイアウトでもないでしょうから。ですのでデザイン的にはターゲットとなるwebブラウザはN6や Mozilla を想定していますが、HTML的には素直なよいHTMLをめざしてますので、普通のwebブラウザであれば閲覧に支障はないでしょう。デザインが再現できるかはともかく。