Bulmaで画面一杯に広がるパネル(Hero)を作成する

https://bulma.io/documentation/layout/hero/に掲載されている例

<section class="hero is-success is-fullheight">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Fullheight title
      </h1>
      <h2 class="subtitle">
        Fullheight subtitle
      </h2>
    </div>
  </div>
</section>

テキストのセンタリング

3行目、containerのクラスにhas-text-centeredを追加します

<section class="hero is-success is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centerd">
      <h1 class="title">
        Fullheight title
      </h1>
      <h2 class="subtitle">
        Fullheight subtitle
      </h2>
    </div>
  </div>
</section>

背景画像の設定

1行目、sectionにstyle="background-image: url('URL')"を追加します

<section class="hero is-fullheight" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Mount_Ishizuchi.jpg')"><!--修正-->
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Top of Mount Ishizuchi, Ehime, Japan.
      </h1>
      <h2 class="subtitle">
        uploaded by HendrixEesti - http://en.wikipedia.org/wiki/Image:Ishizuchi.jpg
      </h2>
    </div>
  </div>
</section>

画像を中央に配置

1行目、heroクラスをhero-1クラスに変更します

<section class="hero-1 is-fullheight" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Mount_Ishizuchi.jpg')">
  <div class="hero-body">
    <div class="container has-text-centerd">
      <h1 class="title">
        Top of Mount Ishizuchi, Ehime, Japan.
      </h1>
      <h2 class="subtitle">
        uploaded by HendrixEesti - http://en.wikipedia.org/wiki/Image:Ishizuchi.jpg
      </h2>
    </div>
  </div>
</section>

CSS（SASS）を編集します

.hero-1 {
  @extend .hero;
  background-size: cover;
  background-position: center;
}

スクリーンショットでは4行目と7行目、titleとsubtitleにhas-text-whiteクラスを追加して文字色を白にしています

画像を暗くする

1行目、styleのbackground-imageにlinear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7))を加えます

<section class="hero-1 is-fullheight" style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('https://upload.wikimedia.org/wikipedia/commons/2/24/Mount_Ishizuchi.jpg');">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title has-text-white">
        Top of Mount Ishizuchi, Ehime, Japan.
      </h1>
      <h2 class="subtitle has-text-white">
        uploaded by HendrixEesti - http://en.wikipedia.org/wiki/Image:Ishizuchi.jpg
      </h2>
    </div>
  </div>
</section>