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

'22 01 31

全画面表示にするには、画像を直接表示する方法と、背景に表示する方法、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; }