Add Background Picture on footer only Dawn Theme

Topic summary

A user seeks to add a background image to the footer in Shopify’s Dawn theme. Multiple solutions are provided:

Initial Solution:

  • Add CSS code to base.css (Layout folder) targeting .footer class
  • Use background-image: url() with specific image URL
  • Include properties: background-size: cover, background-position: center, background-repeat: no-repeat

Follow-up Issue:
After implementing the background, the email subscribe button loses its fill color, showing only an outline.

Button Fix:

  • Add CSS to theme.liquid or base.css targeting .newsletter-form__field-wrapper .field__input
  • Set background-color: transparent to maintain the outline-only appearance

Status: Resolved. The user confirms both solutions work successfully.

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

hi i want to add Background Picture on footer on Dawn Theme

i found the code for it but didnt work

can u please help me?

web:

https://viw0k7vg37df09qo-76524519745.shopifypreview.com/

1 Like

Hi @yokota_1

you can do it by adding this code to your theme.liquid file before tag in Online store > Themes > Edit code


Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Layout > base.css and paste this at the bottom of the file:
.footer {
background-image: url(https://viw0k7vg37df09qo-76524519745.shopifypreview.com/cdn/shop/files/Yokota-Akiko-Banner.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
1 Like

hi this code works well!

but now subcribe email button have color

how to change to to outline button only without fill color?

1 Like

Hello @yokota_1
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag


Let me know if need further assistance
Regards,
Artzen Technologies

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Layout > base.css and paste this at the bottom of the file:
.newsletter-form__field-wrapper .field__input {
background-color: transparent;
}

1 Like

thank you very much sir!

1 Like

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.