背景画像

画像解説が必要な場合：img要素
画像解説が不要な場合：backgroundプロパティ

プロパティ	意味	値	初期値
background-color	背景色	カラーコード｜カラーネーム｜transparent	transparent（透明）
background-image	背景画像	url（ファイルパス）｜none	none（画像なし）
background-repeat	背景画像の繰り返し方向	repeat｜repeat-x｜epeat-y｜no-repeate	repeat（縦横に繰り返し）
background-position	背景画像の表示開始位置	位置を表すキーワード｜%｜数値（px）	左上（left top｜0% 0%｜0px 0px）
background-attachment	背景画像の固定・移動	fixed｜scroll	scroll
background-size	背景画像の表示サイズ	auto｜cover｜contain｜幅高さ（単位付き数値指定）	auto（原寸）

Illustrator（生成ベクター）で作成したイラストを「.png」で保存

記述例

<body>
  <div class="bg_img"></div>
</body>

.bg_img{
  width: 680px;
  height: 400px;
  background-color: #d5fac8;
  background-image: url(img/flower.png);
  background-repeat: no-repeat;
  background-position: 10px 10px;
  background-attachment: fixed;
}

背景をショートハンドで記述

.bg_img{
  width: 680px;
  height: 400px;
  background: #d5fac8 url(img/flower.png) no-repeat 10px 10px fixed;
}

中央に配置

background-attachment: fixed; は、省略可能

.bg_img{
  width: 680px;
  height: 400px;
  background: #d5fac8 url(img/flower.png) no-repeat center center;
}

background-size

背景画像の表示サイズを指定するためのプロパティです
初期値の「auto」は原寸表示となり、それ以外に「cover」「contain」「横縦」が指定できます
「cover」「contain」は、元画像横比率を保ったまま配置しますが、横・縦を数値指定すれば比率を変更することができます

unsplash.com

<ul class="bgsize">
  <li class="bgsize01">auto</li>
  <li class="bgsize02">cover</li>
  <li class="bgsize03">contain</li>
  <li class="bgsize04">%</li>
  <li class="bgsize05">px</li>
</ul>

auto

初期値の「auto」は原寸表示

  ul {
  list-style: none;
}
.bgsize01 {
  width: 500px;
  height: 360px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/swimming.jpg) no-repeat;
  background-size: auto;
}

cover

写真の比率を保ちつつ、背景画像は常に縦または横の一辺に100％ふぃっとして要素全体を覆う状態となります

.bgsize02 {
  width: 500px;
  height: 360px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/swimming.jpg) no-repeat;
  background-size: cover;
}

contain

写真の比率を保ちつつ、常に背景画像全体が要素の中に全て表示される状態となります

.bgsize03 {
  width: 500px;
  height: 360px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/swimming.jpg) no-repeat;
  background-size: contain;
}

%

「横縦」ともに 100%を指定すると、写真の比率を無視して常にその背景画像で要素全体を覆う状態となります

.bgsize04 {
  width: 500px;
  height: 360px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/swimming.jpg) no-repeat left bottom;
  background-size: 100% 100%;
}

px

「横縦」ともに pxを指定すると、指定したサイズに拡大・縮小させて固定サイズで背景画像を表示できます

multiple-background

CSS3からは、１つの要素に複数の背景画像を指定できるようになりました
従来通り１枚背景画像を指定した後、カンマで区切って２枚目の背景画像を指定します
後から指定した画像は、一番下に配置されます
複数の背景画像の利用

developer.mozilla.org

Illustrator（生成ベクター）で作成したイラストを「.png」で保存

unsplash.com

<div class="multi-bg"></div>

.multi-bg {
  width: 680px;
  height: 400px;
  margin: 50px auto;
  box-sizing: border-box;
  background: 
    url(img/flower.png) no-repeat 90% 30%, 
    url(img/bg.jpg) no-repeat;
  background-size: 30%, cover;
}