bodyのbackgroundへ画像を1枚貼り付けてみましょう。
背景に画像を1枚貼り付ける。
スタイルシートのソースは、こういう書き方になります。
cssソース
/*====参考====*/ body { background: #e6e6e6 url("./images/s256_f_health_11_0bg.png") no-repeat; }
それでは見ていきましょう。
画像で埋め尽くすソースと違うのはno-repeatとなっているところです。
repeatしない、繰り返し表示しない、ということになり、表示位置を指定しない限り、左上の角に貼り付きます。
貼り付ける位置を指定する
スタイルシートのソースを見てみましょう。
cssソース
/*====参考====*/ body { background: #e6e6e6 url("./images/s256_f_health_11_0bg.png") no-repeat 50% 100px; }
上のソースと違うところはno-repeatの後に半角スペースを空けて50% 100pxが追加されているところです。
はじめに書いてある50%は、要素の左側から50%の位置、という指定です。
この場合、セレクタがbodyですから画面の幅の左から50%、つまり中央になります。
次の100pxは画面の上から100pxの位置、という指定です。
この様に位置表示が2つあるときは左から、そして上から、というのがデフォルトです。
上下左右を組み合わせることもできますよ。
cssソース
/*====参考====*/ body { background: #e6e6e6 url("./images/s256_f_health_11_0bg.png") no-repeat right 150px bottom 30%; }
とすれば、画像は右から150px、下から30%の位置に配置されます。
bottomを先に、rightを後に書いても問題ありません。