背景画像を設定する

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

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

ちょっと複雑ですね。

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

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

<img src="http://otehonhp.com/wp-content/uploads/2017/08/1-31.png" alt="" width="525" height="365" class="alignleft size-full wp-image-1349" /><br clear="both">

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

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


関連記事

  1. 新しいウィンドウでリンクする

  2. 【練習】このページを作りなさい

  3. 文字の色を指定する

  4. リストを作る

  5. 「初めてWeb入門」講座一覧

  6. ヘッダーを作成する

お手本ナビの無料HPデザイン

ランダムピックアップ