Add static background image to email signup DAWN theme

Store Design
, ,

Topic summary

Goal: add a static background image to the Dawn theme newsletter/email signup section, configurable via the editor. The store link and a screenshot were provided; the blog-based code used by the poster didn’t work.

Proposed approach: add Custom CSS to the section targeting .newsletter__wrapper (or .newsletter .newsletter__wrapper) with background-image, background-size: cover, and background-position: center to display a chosen image.

Clarification: the poster wants the image “static,” not with a parallax-like effect. In CSS, background-attachment controls this behavior: fixed keeps the image pinned to the viewport; scroll moves it with the content.

Latest update: one contributor said adding background-attachment: fixed !important resolved their similar issue, but their pasted full CSS shows background-attachment: scroll !important, which conflicts with that advice. The key is selecting the desired attachment value (fixed vs scroll) for the effect.

Status: no confirmed resolution from the original poster. Next action: adjust background-attachment and verify the correct selector (.newsletter__wrapper) in the Custom CSS; ensure the image URL is valid and editor-configurable.

Summarized with AI on December 21. AI used: gpt-5.
1

Hello !! I want to add static image to my shopify email sign up, can anyone help please ?

Like this -

shilpa_etsy_0-1721984222165.png
shilpa_etsy_0-1721984222165.png1788×279 33.6 KB

My store - https://astral-realm-light.myshopify.com/

Password - astra

I want it changeable from my editor
I used this code- https://websensepro.com/blog/how-to-add-background-image-to-a-section-on-shopify/ but it’s not working i guess, can anyone please help ?

Thank youu !!

2

Hi @shilpa_etsy

You can try to add this code to Custom CSS of that section and check

.newsletter__wrapper {
    background-image: url('your-image-link');
    background-size: cover;
    background-position: center center;
}
3

Hi @shilpa_etsy ,

You can try adding the following code to the Custom CSS of the section and then check:

.newsletter .newsletter__wrapper {
background-image: url('');
background-size: cover;
background-position: center center;
}

Please refer to the screenshot .

Sweans_0-1721990359181.png
Sweans_0-1721990359181.png1912×905 71.4 KB

Sweans_1-1721990426430.png
Sweans_1-1721990426430.png1892×910 154 KB

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

4

I want it static, it looks like parallax

5

I was having the same problem. Adding this piece to the CSS worked for me:

.background-attachment: fixed !important;

My full CSS was this for this section is:

.newsletter__wrapper {
background-image: url(“Your Image Link Here”);
background-size: auto;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll !important;
}