お食事 | デモサイト 20 ロッジ・宿泊施設新潟県南魚沼市

お好みのページヘッダーを設定できます

このページのようにページヘッダーに背景画像を設定することができます。

ページごとに異なる画像を設定できます。
こちらのページのように新着情報のページにも設定できます。

以下の CSS を ujs-wsp-customize の style.css に記述してある。

/* ページヘッダーの背景画像の設定を「アイキャッチ画像を使う」にしたときにヘッダー透過にする */
body.phec_eyecatch #site-header {
    background-color: rgba(255,255,255,0.75);
}
body.phec_eyecatch.header_scrolled #site-header {
    background-color: rgba(255,255,255,0.9);
}
body.phec_eyecatch:not(.header_scrolled) #site-header {
    position: absolute;
}
body.phec_eyecatch .page-header {
    min-height: min(400px, 50vw);
    min-height: clamp(240px, 25vw, 360px);
    padding-top: 80px;
    background-size: cover;
    background-position: center;
    color: #fff;
}
body.phec_eyecatch .page-header {
    margin-top: 0 !important; /* スクロール時にカックンとなることを防ぐ */
}
body.phec_eyecatch .page-header::before {
    background-color: #000;
    opacity: 0.3;
}