Adding Background Image to email sign up section

Store Design
, ,

Topic summary

A user seeks to add a custom background image to their Shopify store’s newsletter/email signup section, which currently displays only plain colors.

Multiple solutions provided:

  • Upload image via Admin → Content → Files, copy the image URL
  • Add CSS code to base.css file (found under Online Store → Themes → Edit Code → Assets folder)
  • Target the .newsletter__wrapper or .newsletter__wrapper.content-container class
  • Use CSS properties: background-image: url('your-image-url'), background-size: cover, background-position: center, background-repeat: no-repeat

Current issue:
One user reports the CSS solution works on desktop but fails on mobile devices. The discussion remains open with no resolution yet provided for the mobile responsiveness problem.

Note: Several code snippets and URLs in the thread appear reversed/encoded, but the core technical approach is clear.

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

is there a way to add a custom background to the newsletter sections? its plain colors now but want to add custom images for better style.

let me know if u can help!!

website - https://the-style-luxe.myshopify.com/

password - reucho

hasanali1_0-1679523340120.png
hasanali1_0-1679523340120.png1378Ă—695 95.5 KB

1 Like
2

Hi @hasanali1 ,

You can add a background image to the footer by following the instructions below.

  1. From your Admin page, go to Content, then Files

  2. Upload the image you need.

  3. Copy the link on the image. See image below

made4Uo_0-1679531764052.png
made4Uo_0-1679531764052.png1903Ă—814 85.8 KB

Add the CSS below

  1. From the Admin page, go to Online store > Themes > click the three dots > edit code

  2. Open the base.css file under the Asset folder

  3. Add the code below at the very end

NOTE: Change the link, “https://cdn.shopify.com/s/files/1/0631/2057/2661/files/made4uo-logo_circle.png?v=1679531426”

.newsletter__wrapper.content-container {
    background-image: url(https://cdn.shopify.com/s/files/1/0631/2057/2661/files/made4uo-logo_circle.png?v=1679531426);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
1 Like
3

it’s definitely possible to add custom images as backgrounds to your newsletter sections on your Shopify store.

To do this, you will need to add some CSS code to your website. Here’s an example of what the code should look like:

.newsletter {
  background-image: url('https://www.yourimage.com/yourimage.jpg');
  background-size: cover;
}

In the code above, replace “https://www.yourimage.com/yourimage.jpg” with the URL of the custom image you want to use as your newsletter background. You can also adjust the “background-size” property to control the size of the image.

Once you’ve added the CSS code to your website, your newsletter section should have a custom image as the background.

4

@hasanali1

Step1: Go to online store → Edit code

Step2: Search base.css file

Step3: Paste below code bottom of the css file → save

.newsletter__wrapper {
  background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg');
  background-repeat: no-repeat;
  width: 100%;
  background-position: center center;
  background-size: cover;
}
5

This code worked great but not on mobile.. Any idea how to fix it?

6

This doesn’t work on mobile. Can you fix it?