作成方法:全ページ画像
- 前のページ 透き通る画像テキスト
- 次のページ 画像上のフォーム
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%; }
- 前のページ 透き通る画像テキスト
- 次のページ 画像上のフォーム