Background Image Layout on Dawn theme

Store Design
, ,

Topic summary

A user is experiencing two issues with background images in their Dawn theme homepage sections:

Primary Issues:

  • Images appear enlarged and move during scrolling (parallax effect)
  • On larger screens, the background image repeats at the side edges

Root Causes Identified:

  • The original image was only 1440px wide, causing stretching on larger screens (minimum 1920px recommended)
  • The parallax scrolling is caused by background-attachment: fixed applied via a “gradient” class

Proposed Solutions:

  • Upload larger images (at least 1920px wide) to prevent stretching
  • To remove parallax: locate the “gradient” class in the theme section file and change background-attachment: fixed to background-attachment: local
  • Search for “background-image” or “background-size” properties in the section file using Ctrl + F

Current Status:
After uploading a larger image, the user now faces image repetition on wider screens. The discussion remains open regarding how to prevent this repetition while maintaining proper coverage.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have added an image as a background within 2 sections of my Dawn theme homepage, and it appears that the theme is “enlarging” the images, and allowing them to move with scroll. How can I make the images static, and have them fit to the section?

Here is a link to my store: https://v02bg77gk3eh3re4-62631641145.shopifypreview.com

2

For your first issue where it’s enlarging the image, that’s because the file you have uploaded is only 1440px wide and to function as a background on larger size screens it’s going to have to get stretched, otherwise how would the image cover the space? You need to upload an image that’s at least 1920px:

Ninthony_0-1722445624410.png
Ninthony_0-1722445624410.png1920×970 124 KB

The second issue is the background-attachment property set in that section itself. There’s a class on that container called “gradient” that is applying

background-attachment: fixed;

to your background image, which causes the background image to have a parallax effect. I say keep it, as it’s more visually engaging. However if you want to fix it you can go into that section in the theme code and remove that “gradient” class if you can find it or whatever section setting is applying that class. Or you can look for where the background-image itself is getting applied in that section. I would open up the section file and Ctrl + F and search for “background-image” or “background-size” and just add

background-attachment: local;

to the styles

3

Thank you!

I’m fine with keeping the parallax effect, its just that when you scroll down, you end up seeing the bottom of the image. Is there a standard height that would prevent this from happening? I’ve looked around a few times for Shopify Guidelines on image sizes, but didn’t really come up with anything.

4

Hi @Ninthony ,

I was able to get a larger image, but it appears that the image is now repeating on a larger screen. So you see the background repeat on the outside edges. Is there any way to adjust this?

https://by9udmuvgwv2nm75-62631641145.shopifypreview.com