Include a image on the background in a newsletter subscription field

Technical Q&A
,

Topic summary

A Shopify store owner using the Dawn theme seeks to add a background image to their newsletter subscription box in the footer, currently displaying a green background. They want either to replace the green with an image or position the text/box to the right with an image on the left.

Solution Provided:
A community member shared CSS code to add a background image:

  • Insert code at the bottom of the CSS file
  • Replace the placeholder URL with the desired image URL
  • Code includes properties for background positioning, size, and no-repeat

Current Issue:
The original poster reports the CSS worked initially, but when inserting their own image URL from Canva, it reverts to the green background. They attempted using:

  • Canva’s Smart Embed link
  • HTML Embedded code (iframe)

Neither Canva option worked with the provided CSS format. The discussion remains open with the user requesting further assistance on how to properly implement their Canva image or where to place the HTML embed code.

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

Hi,

Can you please tell me how I can add an image to my newsletter box which is in my footer section (see below screen shot). I would like the image to replace the green background. Or alternatively, I would like to move the text and the box to the right and have a small box with an image on the right.

The theme I am using is Dawn.

my website URL is www.topnewtrendz.com if you would like to have a look.

Regards

Rajinder

Screenshot 2023-04-26 194740.png
Screenshot 2023-04-26 194740.png1363×692 40.8 KB

2

Hi @RajinderKumar

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.newsletter .newsletter__wrapper {background-image: url(https://images.pexels.com/photos/4063619/pexels-photo-4063619.jpeg) !important; background-position: top left; background-size: cover; background-repeat: no-repeat;}

Note: You can change the background image any time yourself just replace the image URL

Regards,

San

3

Hi San,

Thats perfect, the code has worked, but when I insert an image url it reverts back to the orignal green screen.

I have a image on Canva and it’s allowed me to embed a code into the image. It’s given me two:

HTML Embeded code:

Design by Sushma Kaler

and a Smart embeded link:

https://www.canva.com/design/DAFhVbk3cEo/view

Using the code you have given above I have used the smart emedded link in the below format but its not worked. I don’t know how or where to put the HTML embedded code.

.newsletter .newsletter__wrapper {background-image: url(https://www.canva.com/design/DAFhVbk3cEo/view) !important; background-position: top left; background-size: cover; background-repeat: no-repeat;}

Could you please help.

Regards

Raj