(ウ) 背景画像を設定する

さて。次はいよいよ背景画像です。まずは、コードを見てみましょう。

#header {
      background: url(./images/bg_header.jpg) 0 0 no-repeat;
   padding: 50px 0 0 50px;
   height: 300px;
}

ちょっと複雑ですね。

background: 画像のパス 左からの距離 上からの距離 繰り返すか;

です。

これは、こういうもんだ、と覚えてしまった方が楽かもしれません。
あ、覚えなくてもいいです。いつでも調べられるので＾＾；
では、表示例です。

※CSSで背景に画像を指定する場合、heightやwidthを指定しないと画像が欠けてしまいます。なぜかと言うと、ボックスは、背景の画像に合わさるのではなく、中身の大きさに合わさってしまうからです（今回の場合の中身とは「初めてWeb入門」という文字）。だからここでは、背景の画像を全部見えるようにするために、heightを指定しているのです。
この部分は、少々発展的なものなので、『初めてWeb入門』を初めて読む場合は、読み飛ばしていただいて構いません。これからサイトを作っていくうちに、自然とわかってくることだと思いますので。

それっぽくなってきましたね。
次は、コンテンツを右と左に分ける方法について解説してきます。

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。