How to Add a Background Image to a Newsletter Block in Squarespace

Customize Your Newsletter Block with CSS

Want to give your Squarespace newsletter block a visual improvement? Instead of a plain box, you can add a background image to help it stand out and better match your site’s style.

In this quick tutorial, I’ll walk you through the exact steps to customize your newsletter block using a bit of custom CSS—no coding experience required!

Follow the steps below to transform your form from basic to beautiful:

Newsletter block without background image

Newsletter block with background image

Add a Background Image to a Newsletter Block in Squarespace

Step 1: Add Your Newsletter Block

Start by adding a newsletter block to any page on your Squarespace site.

Step 2: Turn On the Background Setting

1. Select the newsletter block.

2. In the block settings, go to the Design tab.

3. Toggle "Background" on.

4. Adjust the Padding settings to control the spacing around the form elements.

Step 3: Open Custom CSS

1. Go to Website > Pages

2. Scroll down and click on Custom Code > Custom CSS

Step 4: Upload Your Background Image

1. In the Custom CSS panel, click on Custom Files.

2. Upload the background image from your computer.

3. Once uploaded, your file will appear in the list.

Step 5: Add the CSS Code

1. Copy and paste the CSS code provided below (scroll down) into the Custom CSS field.

2. Find the placeholder that says image-url-here inside the parentheses.

3. Highlight image-url-here only (leave the parentheses).

4. Your uploaded image will automatically be inserted UNLESS your have more than one custom file uploaded.

💡 Note: If you have more than one custom file uploaded, a dropdown will appear—just select the correct image file manually.

Step 6: Save Your Changes

Click Save to apply your changes and preview the newsletter block with the new background image.

Code Snippet

/* Add background image to newsletter form */

.newsletter-block
{background-image:url(IMAGE-URL-HERE); 
background-size:cover;}

---

If you liked this post, you’ll LOVE these:​​

• Eliminate Last Name Field From Newsletter Block in Squarespace

• How to Add a Background Image to the Header in Squarespace

• How to Add a Second Button to Navigation in Squarespace

• How to Easily Add a Text Shadow Effect in Squarespace

This page contains affiliate links

Like this post?

Pin It to Pinterest 👇