CSS フルスクリーンで全画面に画像を表示する方法

CSSを使ってキービジュアルの画像をパソコンとスマートフォンの画面にフルスクリーンのように全画面に表示する方法を説明します。

完成品

See the Pen
fullscreen Image (background-image)
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
fullscreen Image (background-image)
by kura (@kuranopen)
on CodePen.

<div class="hero"></div>が画像表示エリアです。

CSS

See the Pen
fullscreen Image (background-image)
by kura (@kuranopen)
on CodePen.

  1. height: 100vh;を追加します。要素の高さを画面最大まで大きくするCSSで、縦幅いっぱいまで要素が大きくなります。
  2. background-size: cover;を追加します。縦横比は保持して背景画像が要素いっぱいまで表示されます。
  3. background-image: url();はお好み画像を使用してください。
  • このエントリーをはてなブックマークに追加

【続き】 CSSテクニックの便利な使い方

新しい記事はありません