いまいち用途の分からないJumbotronに背景画像を入れてみた

現在Hexoで使っているテーマFreewillはBootstrap準拠なので、ヘッダー領域にJumbotronというのが付いている。
ブログの説明がある場合はここに説明文（subtitle）、無い場合はブログタイトル（title）が挿入される。
やたらと場所を取るし何に使ったら良いのか分からないので活用して来なかったが、背景画像を入れてみた。

画像を入れることにしているhexo/source/imagesに背景にしたいファイルを追加。
hexo/themes/freewill-rev/source/css/style.cssにbackground-imageを追記した。

.jumbotron {
    background-image: url("/images/ファイル名");
    padding-top: 60px;
    padding-bottom: 12px;
}

（参照記事:ジャンボトロンに背景画像～Bootstrap3移行ガイド）

デフォルトでは.jumbotron {padding-top: 48px; padding-bottom: 48px;}だったが変更している。
画像ファイルは大きい時には自動的に切り抜かれ、小さい場合はタイル化されるようだ。

Jumbotronのhtmlはhexo/themes/freewill/layout/index.ejsに記述されていたが、title、subtitleの両方を入れることとし、<h1>タグになっていたのをそれぞれ<h2>、<h3>に変更した。

<div class="jumbotron page-header bg-primary">
  <h1><% if (config.subtitle){ %><%= config.subtitle %><% } else { %><%= config.title %><% } %></h1>
</div>

↓下記に変更

<div class="jumbotron page-header bg-primary">
  <h3 style="color: #eeeeee;"><%= config.subtitle %></h3>
  <h2 style="color: #eeeeee;"><%= config.title %></h2>
</div>

殺風景だったブログが少し華やいだ。

ーー
（追記）
その後Jumbotronにスライドショーを表示することにしたので、background-imageは無しにした。
jQueryでヘッダー背景をスライドショー化