MENU
  1. ホーム
  2. CSS
  3. background-size

background-size

CSS
2023.12.29

background-sizeプロパティは、要素の背景画像のサイズを指定するためのCSSプロパティです。

background-sizeの説明図
background-sizeプロパティ
記法

.クラス名　{
　background-size: 表示サイズ;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>background-sizeプロパティ</title>
  </head>

  <body>
    <p>サイズ指定なし</p>
    <div class="tomoji-element"></div>
    <hr>
    <p>サイズ指定あり</p>
    <div class="tomoji-element background-size"></div>
  </body>
</html>
.tomoji-element {
  background-image: url(画像URL.拡張子);
  height: 200px;
  background-size: 30px;
}
出力結果

サイズ指定なし

サイズ指定あり

CSS