Main issue: Background images added to the Dawn 2.0 theme’s header and footer are not sizing or positioning correctly. The user referenced inspected dimensions (header ~635×107 px; footer ~635×651 px), but images scaled to those sizes appear enlarged or misaligned.
Key context: Another participant explained that header and footer dimensions change across devices (responsive design). CSS rules can also stretch or alter images, so fixed pixel dimensions from inspection are not reliable targets.
Request for details: A helper asked for the store URL to examine the live setup and diagnose CSS/theme settings affecting background images.
Latest update: The original poster tried a suggested code change but observed no visible difference on desktop or mobile when compared to the unedited theme using the same footer background image. They questioned what the code change was intended to accomplish.
Status: Unresolved. Next steps depend on reviewing the store URL and clarifying the intended CSS behavior for the background image. Outstanding questions include which CSS properties (e.g., background-size/position) are active and how responsive breakpoints affect header/footer height.
I’ve figured out how to add a background image to both the header and footer of my Dawn 2.0 themed site however; I’m having a real problem creating an image that’s the correct size and scale.
When I inspect the page the header and footer seem to have the sizing below:
Header: 635 x 107.18
Footer: 635 x 650.85
If I scale my background images to these proportions they do not fit correctly, are enlarged or otherwise out of place.
What am I doing wrong here?
Thanks!
@Carloe12 - the footer and header height width changes as per the device
and even some css settings are applied to images making them to stretch or change
Hello @Carloe12 !
Can you please share your store URL so that I can check and can help you with resolving your problem?
I appreciate changing the code, but what exactly does this accomplish?
Having implemented this code on a trial store and comparing it with non-edited code that is using the same image for the footer background I see no difference on either desktop or mobile.