現在、レスポンシブな背景画像を備えた Web サイトが求められています。レスポンシブ Web サイトは、モバイル、タブレット、デスクトップなど、ほぼすべてのデバイスで理想的なユーザー エクスペリエンスをユーザーに提供します。レスポンシブ画像は、Web サイトの背景、画面サイズ、寸法に適応できます。レスポンシブ画像により、品質と比率が確実に維持されます。さらに、レスポンシブな背景画像を備えた Web サイトはすぐに読み込まれます。
このガイドでは、背景画像を画面のサイズに適合させる手順を説明します。
背景画像を画面サイズに適応させるにはどうすればよいですか?
以下に示す段階的な手順を実行することで、画像を画面の寸法に合わせることができます。
ステップ 1: HTML 構造を作成する
まず、HTML 構造を作成し、次のコマンドを使用して外部スタイル シートを追加します。 <リンク> HTMLのheadセクションにあるタグです。そのためには、「」を配置するだけです。 ” を head タグ内に記述します。 ” 相対 ” タグは、ファイルと HTML ドキュメントの関係を指定します。 ” href ” タグは CSS ファイルのアドレスを指定します。
< html >
< 頭 >
< リンク 相対 = 「スタイルシート」 href = 「スタイル.css」 >
< タイトル > レスポンシブ背景画像 タイトル >
頭 >
< 体 >
-- 他のコンテンツを追加するエリア-- >
体 >
html >
ステップ 2: CSS を適用する
次に、CSSを「」に適用します。 体 ' セクション。まずは背景画像を指定します。そのためには、「 背景画像 ”を指定し、” URL() ” 値には画像ファイルのアドレスが含まれます。
その後、「」を使用します。 背景画像 ”で画像サイズを指定し、” 背景リピート ” 画像の繰り返しを設定するプロパティ、および” 背景添付ファイル 」を選択して、画像をページの残りの部分と一緒にスクロールするかどうかを設定します。最後に「」を設定します。 マージン ' そして ' パディング ' に ' 0 ”:
体 {背景画像: URL ( 「テスト画像.jpg」 ） ;
背景サイズ: 100 % 100 % ;
/* 画像の拡大縮小 100 % 幅と 100 % 身長 */
背景リピート: リピートなし;
背景添付: 修正されました。
マージン： 0 ;
パディング: 0 ;
/* オプション: 固定背景 */
}
出力
これは、ブラウザ ウィンドウを縮小する前の出力です。
ブラウザの縮小後:
上記の出力は、画像が背景を画面サイズに適応させていることを確認します。
結論
背景画像を画面サイズに適合させるには、まず「」を含めます。 ビューポート 」をヘッドセクションで使用して、寸法とスケーリングを制御します。次に、HTML 構造を作成し、CSS を適用します。 CSSで「」を設定します。 背景サイズ ” プロパティ値を” カバー 」値を使用して、画像の高さと幅を拡大縮小します。この記事では、背景画像を画面サイズに適応させるための完全なガイドを紹介しました。