Add image to header background on Dawn theme

Shopify Discussion

Topic summary

A user sought help adding background images to the header and footer in Shopify’s Dawn theme. Their initial CSS code worked on desktop but failed on mobile devices due to a media query restricting it to screens 900px and wider.

Solution provided:
Removing the @media screen (min-width: 900px) wrapper allowed the background images to display across all devices. The corrected CSS applies the background directly to header.header and footer.footer elements without viewport restrictions.

Follow-up questions:

  • One user asked where to locate the header.header section and how to reference local images
  • Another reported only the upper portion of their background image displays, seeking help to show the complete image
  • A third user’s background extends only to the header width rather than full browser width

The original issue was resolved, but related implementation questions remain unanswered.

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

Hi, i’ve been trying to add an image to the background of my header and footer on Dawn theme. I have has success with this code (in Assets > base.css) but it only works on desktop and not in mobile. You can see my site here: www.stickerworth.com. I want mobile to look how it does on the desktop. Thanks for your help :folded_hands:

@media screen and (min-width: 900px) {
header.header {
background: url(“https://cdn.shopify.com/s/files/1/0809/0727/2537/files/Pngtree_white_smoke_in_black_background_1167622_5.png?v=1719477851”) no-repeat;
background-size: 100%;
}
footer.footer {
background: url(“https://cdn.shopify.com/s/files/1/0809/0727/2537/files/Logo_Background_5.png?v=1719358909”) no-repeat;
background-size: 100%;
}

}

1 Like
2

Hi @StickerWorth

It’s password protected.

3

Hi, sorry the password is: gowrti

4

Hi @StickerWorth

Please update your code to this

header.header {
background: url("https://cdn.shopify.com/s/files/1/0809/0727/2537/files/Pngtree_white_smoke_in_black_background_11676...") no-repeat;
background-size: 100%;
}
footer.footer {
background: url("https://cdn.shopify.com/s/files/1/0809/0727/2537/files/Logo_Background_5.png?v=1719358909") no-repeat;
background-size: 100%;
}
1 Like
5

This worked, thank you! I have marked as an accepted solution. Much appreciated :blush:

6

I am new to web design in general so i apologize if my question is a bit obvious, but i am also trying to upload a photo to my banner. I see the code you left. Where do i find the “header.header” section, and how i do i change that to be a photo on my system.

7

hi thanks for your assistance. i used the CSS code you provided for my home page header section to upload a background image, it was successful but it didn’t upload the entire image, just the upper part of the background image was uploaded to my home page header section. How can I fix this and ensure that the entire background image is uploaded to my home page header section. please reply.

8

Hi, this is great but only extends the width of the header not the width rather than the full width of the browser. How can I make it go full width of the browser? Thanks.