背景画像

背景画像

  1. 画像解説が必要な場合:img要素
  2. 画像解説が不要な場合:backgroundプロパティ


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


body {
  background-color: #fafac8;
  background-image: url(img/bg_ph.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
}

背景をショートハンドで記述
body {
  background: #fafac8 url(img/bg_ph.jpg) no-repeat center center fixed;
}

multiple-background

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

developer.mozilla.org




<div class="multi-bg"></div>
.multi-bg {
  width: 400px;
  height: 220px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: 
    url(img/flower.png) no-repeat center top, 
    url(img/ranikai.jpg) no-repeat;
}

  

background-size

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

auto

  

<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>
ul {
  list-style: none;
}
.bgsize01 {
  width: 400px;
  height: 220px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/waikiki.jpg) no-repeat;
  background-size: auto;
}
cover
  • 写真の比率を保ちつつ、背景画像は常に縦または横の一辺に100%ふぃっとして要素全体を覆う状態となります

  

.bgsize02 {
  width: 400px;
  height: 220px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/waikiki.jpg) no-repeat;
  background-size: cover;
}
contain
  • 写真の比率を保ちつつ、常に背景画像全体が要素の中に全て表示される状態となります

  

.bgsize03 {
  width: 400px;
  height: 220px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/waikiki.jpg) no-repeat left bottom;
  background-size: contain;
}
%
  • 「横 縦」ともに 100%を指定すると、写真の比率を無視して常にその背景画像で要素全体を覆う状態となります

  

.bgsize04 {
  width: 600px;
  height: 220px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/waikiki.jpg) no-repeat left bottom;
  background-size: 100% 100%;
}
px
  • 「横 縦」ともに pxを指定すると、指定したサイズに拡大・縮小させて固定サイズで背景画像を表示できます

  

.bgsize05 {
  width: 400px;
  height: 220px;
  margin: 50px auto;
  border: 10px solid #FFF;
  box-shadow: 0 0 4px #666;
  box-sizing: border-box;
  background: url(img/waikiki.jpg) no-repeat left bottom;
  background-size: 170px 100px;
}