【CSS】トップページ全画面表示(フルスクリーン)にする

全画面表示にするには、画像を直接表示する方法と、背景に表示する方法、2つあります。

画像で全画面にする

全画面表示にするには、横幅100%と高さを100vhという単位で作成する必要があります。

HTML
<header>
  <img src="./img/main.jpg">
</header>
CSS
header img{
  width:100%;
  height:100vh;
  object-fit: cover;
}

これでヘッダー内部の画像は天地左右いっぱいで表示されます。
ですが、テキストなどを画像の上に載せるにはpositionの設定をしないとなりません。

背景画像で全画面にする

上記の方法だと重ねるためにpositionの設定をしないとなりませんが、全画面にする画像を背景にしてしまえばもっと簡単です。

HTML
<header></header>
CSS
header{
  width:100%;
  height:100vh;
  background-image: url('./img/main.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー(フリー)/ WEB講師(非常勤)/ 海外販売(法人)他

お仕事のご相談はお問い合わせフォームへお願いします。