背景画像が訪問者の画面の正確なアスペクト比と一致しない限り、ブラウザウィンドウを完全に満たすことはほとんどありません。これは想定される動作です。ブラウザウィンドウには数え切れないほどのサイズと向きがあるため、SeedProd は画像の表示方法を制御するために 3 つの背景サイズオプションを提供します。どのオプションを使用するかを理解することで、目的の結果を得ることができます。
背景サイズのオプション
SeedProd エディターでセクションまたはページの背景設定を編集することで、背景画像のサイズを変更できます。利用可能な 3 つのオプションは次のように機能します。
カバー(デフォルト)
画像は背景領域全体を完全に満たすように拡大縮小されます。空きスペースが表示されることはありませんが、訪問者の画面サイズとアスペクト比によっては、画像の С частиが切り取られる場合があります。
これはデフォルトの設定であり、領域を埋めることが画像全体を表示することよりも重要な、ほとんどの全幅ヒーロー背景に適しています。切り取られたときに表示される画像の С частиを制御するには、背景の位置(焦点)設定を調整します。たとえば、中央中央に設定すると、画像の中央が表示されたままになります。
包含
画像は切り取られることなく、背景領域全体に収まるように拡大縮小されます。画像全体は常に表示されますが、画像の С aspect比がコンテナと一致しない場合、背景色で満たされた空きスペースが周囲に表示されます。
画像全体を常に表示することが重要な場合は、包含を使用してください。たとえば、ロゴ、図、または切り取りによって意味のあるコンテンツが失われる可能性のあるイラストなどです。空きスペースを埋めるために、画像を引き立てる背景色を設定してください。
自動
画像は拡大縮小されずに元のサイズで表示されます。画像がコンテナより小さい場合はデフォルトで繰り返され、大きい場合はオーバーフローして切り取られます。このオプションは最も直接的な制御を提供しますが、画像がコンテナに合わせて正確にサイズ設定されている必要があります。
適切な設定の選択
- 背景がギャップなしで領域を埋める → カバーを使用し、背景の位置を調整して画像の中央部分を制御します。
- 画像全体を常に表示する必要がある → 包含を使用し、周囲のスペースを埋める背景色を設定します。
- 画像は特定の固定サイズです → 自動を使用し、コンテナの寸法に合わせて画像を正確にサイズ設定します。
画像の С サイズの推奨事項
カバー設定で最良の結果を得るには、少なくとも 1920 × 1080 ピクセルの背景画像を使用し、Web 用の適切なファイルサイズ(JPEG 画像の場合は通常 300 KB 未満)でエクスポートしてください。幅の広い横長の画像は、正方形または縦長の画像よりも、さまざまな画面サイズでより予測可能に拡大縮小および切り取られます。
これらの設定を調整しても背景画像が正しく表示されない場合は、背景の位置オプションを試して焦点を移動させるか、または幅の狭い画面でクロップが発生した場合に柔軟性を持たせるために、より広いソース画像を使用してください。