CSSで背景画像を全画面表示にする

harada 3,465views 更新:2014年5月2日

通常は背景画像のサイズが表示範囲よりも大きいと、カットされて表示されてしまいますが下記のようにCSSを指定することで表示範囲いっぱいに縮小して表示することが可能です。
表示サンプルはこちら

CSS

div.cover {
  width: 300px;
  height: 100px;
  text-align: center;
  padding: 50px;
  background: url(http://jsrun.it/assets/i/L/D/M/iLDMs.jpg) left top no-repeat;
  background-size: cover;
  margin:20px auto;
  color:#FFF;
}

HTML

<div class="cover">css適用コンテンツ</div>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません