作成方法:全ページ画像

CSSを使用して全ページ背景画像を作成する方法を学びます。

全ページ画像

ブラウザウィンドウ全体を覆う背景画像の作成方法を学びます。以下の例では、全画面(および半画面)のレスポンシブ背景画像が表示されます:

デモ - 全ページ背景画像

デモ - 半ページ背景画像

全高画像の作成方法

コンテナ要素を使用し、そのコンテナに100%の高さの背景画像を追加します。

ヒント:50%を使用すると、半ページ背景画像を作成できます。その後、以下の背景属性を使用して画像を中央に配置し、拡大します:

注意:画像がスクリーン全体を覆うようにするためには、以下の他にも設定する必要があります height: 100% 同時に適用されます <html> および <body>:

全ページ背景画像:

body, html {
  height: 100%;
}
.bg {
  /* 使用されている画像 */
  background-image: url("dancer.jpg");
  /* 全高 */
  height: 100%;
  /* 画像をきれいに中央に配置し、拡大する */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

自分で試してみる

半ページ背景画像:

.bg {
    height: 50%;
}

自分で試してみる