【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講師(非常勤)/ 海外販売(法人)他

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