ヘッダ画像の高さをデバイスの高さに合わせる方法

ヘッダ画像の高さをデバイスの高さに合わせる方法について

▼javascript

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

▼html

<div class="header_img">
</div>

▼css

  width: 100%;
  height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  height: calc(var(--vh, 1vh) * 100);
  background-position: top;
  background-size: cover;
  background-attachment: fixed;/* スクロールしたときにヘッダ画像が下から隠れるようにしたいときはこれを記載 */
  margin: 0 auto;

さらに、カスタムヘッダーをｂackground-imageで表示させる方法はこちら

Chobi Design