A background image will rarely fill the browser window perfectly unless it matches the exact aspect ratio of the visitor’s screen. This is expected behaviour — browser windows come in countless sizes and orientations, so SeedProd gives you three background size options to control how the image is displayed. Understanding which option to use will help you get the result you want.

Background Size Options

You can change how your background image is sized by editing the section or page background settings in the SeedProd editor. The three available options behave as follows:

Cover (Default)

The image scales up to completely fill the background area. No empty space is ever shown, but parts of the image may be cropped depending on the visitor’s screen size and aspect ratio.

This is the default setting and works well for most full-width hero backgrounds where filling the area is more important than showing the entire image. To control which part of the image remains visible when it is cropped, adjust the Background Position (focal point) setting — for example, setting it to Center Center keeps the middle of the image in view.

Contain

The image scales to fit entirely within the background area without being cropped. The full image is always visible, but if the image’s aspect ratio does not match the container, empty space will appear around it filled by the background colour.

Use Contain when it is important that the entire image is always visible — for example, a logo, diagram, or illustration where cropping would remove meaningful content. Set a background colour that complements the image to fill the empty space.

Auto

The image displays at its original size without scaling. If the image is smaller than the container it will repeat by default; if it is larger it will overflow and be cropped. This option gives you the most direct control but requires the image to be sized precisely for the container.

Choosing the Right Setting

• Background fills the area with no gaps → use Cover and adjust the Background Position to control which part of the image is centred.
• Full image must always be visible → use Contain and set a background colour to fill the surrounding space.
• Image is a specific fixed size → use Auto and size your image to match the container dimensions exactly.

Image Size Recommendations

For the best results with the Cover setting, use a background image that is at least 1920 × 1080 pixels and export it at an appropriate file size for the web (typically under 300 KB for JPEG images). A wide, landscape-oriented image will scale and crop more predictably across different screen sizes than a square or portrait image.

If your background image still does not look right after adjusting these settings, try experimenting with the Background Position option to shift the focal point, or use a wider source image that gives more flexibility when cropping occurs on narrower screens.