How to change the grey area color in Dawn theme's image banner?

Store Design

Topic summary

Main issue: The Dawn theme’s image banner shows a grey area around the image on different screen resolutions; request to change that grey to black and improve image clarity.

Attempts: Exported images at 2560×1080 (144 dpi) and later 4000×1080 (144 dpi); also tried 300 dpi. Switched from fixed-size to dynamic (responsive) mode and set different images for desktop and mobile.

Actions taken: A helper asked for the site URL and image; the user shared calmacoils.com and specs. The helper provided step-by-step screenshots (attachments are central) to adjust settings/code.

Outcome: The steps solve the desktop appearance issue. On mobile, the image is still cropped left/right despite using a separate mobile image, and the banner remains slightly blurry compared to Photoshop.

Key terms: DPI (dots per inch) is an image export setting; dynamic mode means the banner adapts to various screen sizes; compression refers to the platform reducing image file size.

Open questions: How to consistently set the banner’s background to black on mobile, and whether there’s code to prevent Shopify from compressing images.

Status: Partially resolved (desktop). Mobile cropping and image quality/compression are still unresolved; further guidance requested.

Summarized with AI on January 12. AI used: gpt-5.
1

Hello i have a question about the dawn theme. My question is for the 1st page image banner, i managed to keep the size steady and also have a different picture on desktop and mobile so the size looks better. No matter what i do though, i cant find the exact size so i dont see a grey area around the picture, i can understand that it has to do with the screen resolution and the proportions of it, it changes from monitor to monitor or phone to phone, i am just wondering if there is a way to change the grey color into black so it resembles the color of my image, so no matter what the screen resolution is, you dont see the grey area.

If you can also help me with the resolution it would be great, i am exporting the image at 2560x1080 at 144dpi but it seems that the picture is slightly blurry compared to the one i see in photoshop.

Thanks in advance!

2

hi. @CalmaCoils

Please send page URL

3

https://calmacoils.com/

at this version i have removed the code that makes the size of the image stable, now it is in dynamic mode so it adapts in each screen, but still i get a blurry image although i have tried both 144 and 300dpi images

4

send me image please

5

the image that you can see right now if you go on the web page is 4000x1080 at 144dpi

6

Follow the steps

websensepro_0-1700748393773.png
websensepro_0-1700748393773.png1305×434 62 KB

websensepro_1-1700748396583.png
websensepro_1-1700748396583.png391×550 24.4 KB

websensepro_2-1700748399377.png
websensepro_2-1700748399377.png321×554 21.4 KB

7

It solves the problem for the desktop version but in mobile preview it cuts the image left and right although i have used a code to have a different image for mobile and desktop, the only solution that i can find for the moment is to make the image within the whole image smaller. But is there a code i can try in order for shopify not to compress so much the quality of the picture, because still, although it looks better, it is not crystal clear!