新しいページ(htmlファイル)を作って背景を工夫しなさい。ファイル名はhaikei.htmlとします。制作に苦労した点や,注目してもらいたい点を書きなさい。
繰り返しの背景を使った場合は、繰り返しの元になった絵を img タグでこのページのように紹介してください。
index.html からのリンクを作り,index.html にもどるリンクも作ること。
元の絵はこれです。
元の絵には枠はありませんが,スタイルシートで、img {border:solid 1px} とすればこのように幅1ピクセルの線を引いてくれます。
repeat-x を使って,一番上だけに,画像を配置した例です。普通,背景画像はスクロールとともに動きます。縦長のページだとスクロールするとこのような「つらら」は見えなくなってしまいます。しかし,background-attachment: fixed; を書き加えることにより,スクロールしても動かないようにできます。これは NN4.73では無視されますから注意が必要です。
body { background-color : #f0f8ff; background-image : url(images/tsurarav.png); background-repeat: repeat-x; background-attachment: fixed; }
あわせて次のように書くこともできます。
body { background: #f0f8ff url(images/tsurarav.png) repeat-x fixed;}
repeat-x や repeat-y の画像と文字が重ならないようにするには margin が最適です。repeat-x なら,一番上の H1 や div.shomei の上マージンを大きくとります。このページは「もどる」ボタンをあえてつららと重ねたかったので,h1 の mergin を大きくしました。
h1 {
color :#003300;
text-align:center;
margin: 20% 30% 4% 30%;
}