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

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

```html
<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>
```

![Screenshot from 2019-10-31 00-57-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79562/8a1e6541-f70a-7d7f-836d-796562d43d1f.png)


## テキストのセンタリング

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

```html
<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>
```

![Screenshot from 2019-10-31 00-59-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79562/83899fea-989e-9332-c6ea-d9da8e9567d2.png)


## 背景画像の設定

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

```html
<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>
```

![Screenshot from 2019-10-31 01-05-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79562/22ed2f15-a0fe-2077-efb8-a1008719731a.png)


## 画像を中央に配置

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

```html
<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）を編集します

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

![Screenshot from 2019-10-31 01-12-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79562/2b3137d0-fb19-d0aa-7b9b-e8729bbc988f.png)

スクリーンショットでは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))`を加えます

```html
<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>
```

![Screenshot from 2019-10-31 08-32-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79562/b9f5b4f5-5e81-4a4a-6c6e-e02d9071e5a4.png)