今回は問題というか、息抜きみたいなかんじです。
これまで、背景画像の、表示位置や繰り返し方を練習してきましたが、
この背景画像は、
ページの任意の位置に固定することもできます。
スクロールしてっても、テキストが流れるだけで、背景画像は動かないボックス。
ときどき見かけますよね。
この設定を定義するために、必要な属性は、「
background-attachment 」。
値は、「
fixed 」です。
例として、下にスクロールボックスをつくってみました。
ただし、
ネットスケープだとうまく表示されてません。
背景を固定したボックスです。
このボックスは、スクロールしていっても、
背景画像が動くことはありません。
ためしにスクロールしてみてください。
☆
☆
☆
☆
☆
☆
☆
☆
☆
☆
背景は動きませんよね？
.box1{
width: 300px;
height: 100px;
padding: 10px 0px 0px 10px;
border: solid #FF9999 1px;
background:url(img/haikei2.gif);
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
overflow: scroll;
}
この背景画像の定義は、個人的にはあんまり、
つかいどころがないかなと思います。
ポイントでうまく使えるアイデアが浮かべばＯＫだと思うんですが、
とりあえず知っておいて損はないと思いますので紹介します。
それでは次はいよいよ、背景と枠線についての確認問題！
これまでのやったことを振り返って、挑戦してみてください。
