背景画像をボックスの真ん中に表示したい

繰り返さない背景画像をボックスの中央に配置するには、backgroundプロパティ、もしくはbackground-positionプロパティを使用します。背景画像をボックスの中央に配置するには値を「center center」にします。

書式

background-image:url(./images/bg.png);
background-position: center center;
background-repeat: no-repeat;

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
      .event{
        margin: 0 auto;
        border: 1px solid #7eb169;
        padding: 80px 50px;
        width: 500px;
        background: url(./images/crown1.png) center center no-repeat;
      }
  </style>
</head>
<body>
  
<div class="event">
  <h1>自然体験教室 </h1>
  <p>野山に入り、虫や野草の観察をしたあと、川に出て、川の生き物を観察します。</p>
</div>
</body>
</html>

カテゴリー:WEB