How can i fit product metafield background image to all screen sizes?

Technical Q&A
,

Topic summary

Issue: A product metafield background image in the Dawn theme appears fine on one laptop but is cropped on a MacBook Air (left side cut off). Images are central to understanding the problem.

Cause: Aspect ratio mismatch between the section/screen and the image. With background images, CSS must either crop (to fill) or leave space; this is expected behavior.

Proposed fixes:

  • CSS: use background-position: center (to keep key content centered). Consider background-size: cover (fills, crops) vs contain (fits, may leave gaps). Add media queries for smaller screens.
  • Structural: apply the background to a broader container like for more consistent behavior across sections.
  • Assets: provide a mobile-optimized version of the metafield image.
  • Alternative: switch from background-image to an tag and control scaling with object-fit for finer responsive control.

Additional note: Avoid placing important information only in images; duplicate as text for SEO.

Status: No confirmed fix yet; recommendations provided, awaiting implementation/feedback.

Summarized with AI on December 11. AI used: gpt-5.
1

Hello! I’ve created my desktop product images with a product metafield background image, and I’m currently testing it on multiple screens. For me on my laptop it works good, it looks like this:

image
image1919×910 454 KB

However, on a MacBook Air for example, it looks like this:

548f3571-5421-436e-98dd-12c01d972dfe
548f3571-5421-436e-98dd-12c01d972dfe2048×1008 279 KB

The left side is not visible properly. Is there any way to fix this? Please help, thank you in advance.

Theme: dawn

website: crescent.hu

2

If screen (or section) aspect ratio does not match your image proportions, it will either crop or leave empty spaces. You can’t beat geometry.

Also – you’re assigning background just on one section, maybe you should assign it on a <main> element…

It’s a great idea to test on different screens. When I’ve bought my ultra-wide display it was an eye-opener experience :slight_smile:

There is also some info on the image, which is not duplicated as text which is not good for SEO.

3

Looks like the background image is keeping its aspect ratio, so on narrower screens it’s getting cropped on the sides. You might want to try setting the CSS to something like background-size: cover; background-position: center; on the metafield container so the image stays centered across different devices.

I ran into a similar issue when testing a layout on a couple of devices while browsing Jenny Mod and adjusting the background rules fixed it right away, so it might help here too.

Hope you get it sorted — Dawn can be picky with responsive images, but a small CSS tweak usually does the trick!

4

Hi @crescenthu

The problem is that background-size: cover is cropping the image when rendered on a smaller screen. Change background-position: center center in your css or use background-size: contain with a media query for small screen. Otherwise, you can supply a mobile-optimized metafield image or switch to an with object-fit for superior control over responsiveness.