画像を1枚表示する


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を後に書いても問題ありません。

次は画像で横ラインを引く

  1. 背景に色を付ける
  2. 背景にグラデーションをかける
  3. 画像をタイル状に配置する
  4. 画像を1枚表示する
  5. 画像で横ラインを引く
  6. 画像で縦ラインを引く
  7. 複数の画像を配置する
  8. 画像にグラデーションをかける