Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

CSS3新要素 | 背景・ボーダー | background-size

概要

css3の背景のサイズを指定するbackground-sizeについて説明します

プロパティ名

background-size

内容

背景のサイズを指定します

設定値

設定値名 設定値内容
auto 自動算出(初期値)
contain 縦横比は保持。最大サイズで背景に表示
cover 縦横比は保持。最小サイズで背景を覆う
長さ 幅・高さを指定
% 画像の幅・高さのパーセンテージを指定

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>background_size</title>
    <style type="text/css">
    p {
      border-style:dashed;
      border-width:10px;
      border-color:#000;
      width:300px;
      height:100px;
      padding:10px;
    }
    p#contents1 {
      background-image:url("background-size.png");
      background-size:auto;
    }
    p#contents2 {
      background-image:url("background-size.png");
      background-size:contain;
    }
    p#contents3 {
      background-image:url("background-size.png");
      background-size:cover;
    }
    p#contents4 {
      background-image:url("background-size.png");
      background-size:10px 10px;
    }
    p#contents5 {
      background-image:url("background-size.png");
      background-size:12.5% auto;
    }
    </style>
  </head>
  <body>
    <p id="contents1">auto</p>
    <p id="contents2">contain</p>
    <p id="contents3">cover</p>
    <p id="contents4">auto length 1px,1px</p>
    <p id="contents5">auto 12.5%</p>
    <hr />
    以下、背景画像
    <img src="background-size.png" alt="" width="" height="" />
  </body>
</html>

完成画面のキャプチャ