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