<div class="hero bg1">
  <h2>背景画像付き</h2>
</div>
<div class="hero bg2">
  <h2>背景色のみ</h2>
</div>
body {
  margin: 0;
  padding: 0;
}
.hero {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero h2 {
  margin: 0;
  padding: 0;
  font-size: 48px;
  color: white;
}
.bg1 {
  background: url("https://katsu-dev.netlify.app/static/default_ogpimage-62d4a2892ca742cbdcb2a1523b97bef3.jpg") center/cover no-repeat;
}
.bg2 {
  background: gray;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.