ワンポイントアドバイス!

「img」はマークアップで意味を持ち、「background」は装飾として使いましょう。

画像

「img」HTMLのファイル
記述例使い方
<img src="images/sample_img001.jpg" alt="" width="400" height="300">画像「img」は
alt=""(必須)
width="400"(推奨)
height="300"(推奨)
※pxの単位は省略可
「background」CSSのファイル
記述例使い方
background-image:url("images/sample_img001.jpg");背景画像「background」「background-image」
background-size:400px;背景の画像サイズ
※pxの単位は省略不可
背景画像に関するセレクタ「background」
background-color背景色を指定する
background-attachment背景画像の固定・移動を指定する
background-image背景画像を指定する
background-repeat背景イメージの繰り返し方法を指定する
background-position背景イメージの位置を指定する
background

background-color
background-attachment
background-image
background-repeat
background-position
背景のプロパティを一括で指定

  • ※順番の指定はなし
background-size背景画像のサイズを指定する

背景画像表示例

※背景画像の領域は内容(コンテンツ)に依存します。特に高さ「height」の扱い方に気を付けましょう。