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

background-position

CSS
2023.12.28

background-positionプロパティは、要素の背景画像が配置される位置を指定するために使用されるプロパティです。

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

.クラス名　{
　background-position: 位置;
}

<!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-positionプロパティ</title>
  </head>

  <body>
    <p>位置指定なし</p>
    <div class="tomoji-element">
      <div class="no-background-position"></div>
    </div>
    <hr />
    <p>位置指定あり</p>
    <div class="tomoji-element">
      <div class="background-position"></div>
    </div>
  </body>
</html>
.tomoji-element {
  background-image: url(画像URL.拡張子);
  height: 200px;
  background-repeat: no-repeat;
}
.no-background-position {
  background-image: url(画像URL.拡張子);
  background-repeat: no-repeat;
  height: 200px;
}
.background-position {
  background-image: url(画像URL.拡張子);
  background-repeat: no-repeat;
  height: 200px;
  background-position: 67px 86px;
}
出力結果

位置指定なし

位置指定あり

CSS