方法-フルページ画像
CSSを使用してフルページの背景画像を作成する方法を学びます。
フルページ画像
ブラウザウィンドウ全体をカバーする背景画像を作成する方法を学びます。次の例は、フルスクリーン(およびハーフスクリーン)のレスポンシブ背景画像を示しています。
フルハイト画像を作成する方法
コンテナ要素を使用し、でコンテナに背景画像を追加しheight: 100%
ます。
ヒント: 50%を使用して、半ページの背景画像を作成します。次に、次の背景プロパティを使用して、画像を完全に中央揃えおよび拡大縮小します。
注:画像が画面全体をカバーしていることを確認するheight: 100%
には、<html>と<body>の両方にも適用する必要があります。
例
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
半ページの背景画像:
例
.bg {
height: 50%;
}