bodyのbackgroundへ画像を配置し、横に並べてみましょう。
背景の横方向に画像を並べる。
スタイルシートのソースは、こういう書き方になります。
cssソース
/*====参考====*/
body {
background: url("./images/s256_f_health_36_0g.png") repeat-x;
}
それでは見ていきましょう。
repeat-xのrepeatは繰り返す、xは横方向へ、という意味になります。
実行すると、要素の上端に、横方向に、タイル状に配置されます、つまり、横方向に1列に画像が配置されます。
上端に並んでいるだけでは面白くないですよね。
下へ、任意の位置に下げることができます。
ソースはこうなります。
cssソース
/*====参考====*/
body {
background: url("./images/s256_f_health_36_0g.png") repeat-x;
background-position-y: 100px;
}
下のソースを追加しました。
background-position-yのposition-yは縦方向、という意味です。
縦方向に上から100px下がった位置で1列に表示されます。
ライン代わりに使い道がありそうです。