背景画像がヒーローイメージにならず困っています。

Question

案件でLPを制作中なのですが、背景画像がヒーローイメージにならず困っています。

だいたい以下のような形でheaderがテキストだったり、mvにテキストを上下中央配置したりするのですが、どちらにせよ意図した形になりません。

以下のコードだとtop + header + mvでヒーローイメージにはなっていますが、mvの背景画像の上下が切れてしまっています。

height: (100vh - top + headerの高さ);

でヒーローイメージになると認識していますが、違いますか？

また、画面幅によって良い感じになったり、サイドが切れたりするのですがこれは仕方なしなのでしょうか？

根本的にヒーローイメージの正解がずっと理解できていなくて…

「これを読め！」みたいなサイトがありましたら合わせて教えて欲しいです。

ちなみに今回の場合、スマホ時はスマホ用の画像を使います。

よろしくお願いいたします。

<div class="top">
  <div class="inner">
    <h1 class="top-ttl">テキスト テキスト テキスト テキスト テキスト</h1>
  </div><!-- inner -->
</div><!-- top -->

<div class="header">
  <div class="inner">
    <h2 class="header-img"><img src="img/header.png" alt="ヘッダー画像"></h2>
  </div><!-- inner -->
</div><!-- header -->

<div class="mv"></div>

.inner {
	margin: 0 auto;
	max-width: 100%;
	padding: 0;
	width: 960px;
}

// top

.top {
	background: #FF7F00;
	height: 30px;
}

.top-ttl {
	color: white;
	line-height: 30px;
}

// header

.header-img {
	height: 85px;
}

// mv

.mv {
	background: transparent url(../img/mv.png) no-repeat center center/cover;
	padding-top: 115px;
    height: calc(100vh - 115px);		
}

Answer 1

vhの使い方やヒーローイメージの画像の調整を時にこちらの記事がとても参考になりました！！
https://mae.chab.in/archives/2749

またこちらのサイトがフルスクリーンレイアウトに対応した書き方の参考になります。
https://qiita.com/omatsu/items/d90a4aca1ecd93eef679

Comments

[kp4livateen]

ご回答ありがとうございます！
また、返事が遅くなってしまい申し訳ありません。

2記事とも熟読し、考え方は間違っていないように思うのですが、やはり意図した形になりませんでした…。

私の書いたHTMLで言う"top", "header", "mv"をboxクラスで囲み、それにheight: 100vh;を当てるとヒーローイメージにはなるのですが、背景画像のMVは切れて表示されるんですよね。。。

何かアイディアありましたら教えてくださいm(_ _)m

Answer 2

mv.pngがどんな画像か質問に記載がないので不明ですが
私なら.mvは書かずにbodyに背景画像を指定します。

body {
  background: url(../img/mv.png) no-repeat center center/cover;
}