How to Add a Background Image to a Gallery Section in Squarespace

Squarespace 7.1 comes with a gorgeous, slimmed-down interface for building galleries, but one thing that it doesn’t have built in is the ability to place a custom background image behind a gallery section. Originally, you can add colors in this way, but how about showing a full, rich image background behind your photos or slides?

In this tutorial, you'll discover how to add a full-width background image on a specific gallery section, no plugins or code blocks needed, with only a dead-simple CSS snippet.

Why Add a Background Image?

Adding a background image to your gallery section can:

• Put a mood or feeling in your imagery

• Blend your galleries into the overall look of your brand.

• Add an editorial profile that is more magazine-like

Step-by-Step: How to Add a Background Image

Step 1: Identify Your Section

Each section in Squarespace 7.1 has a unique data-section-id. Here's how to find it:

1. Visit your live website

2. Right-click on the gallery section → Choose Inspect

3. Look for something like:

Copy

Copied!

<section data-section-id="6857cb4c3b423e68ab286216">
  

Copy the full ID — you’ll use it in the CSS.

Step 2: Upload Your Background Image

1. Go to Pages → Custom code → Custom CSS

2. Scroll down and click Manage Custom Files

3. Upload your image (recommended: JPG or WebP, under 1MB)

4. Click the file to copy its URL

Step 3: Add the CSS

Paste the following code into Pages → Custom code → Custom CSS:

Copy

Copied!

/*Add background image to Gallery Section */
section[data-section-id="6857cb4c3b423e68ab286216"] .section-background {
  background: url(https://wallpapercave.com/wp/qs7dpwZ.jpg) center / cover no-repeat !important;
}
  

Replace the data-section-id and image URL with your own.

Optional Enhancements

Add a Dark Overlay (for readability)

If your gallery captions or buttons are hard to see:

Copy

Copied!

section[data-section-id="6857cb4c3b423e68ab286216"]::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* adjust transparency */
}
  

Final Result

You now have a custom background image behind your gallery section that:

• Stays responsive and full-width

• Keeps your gallery content fully visible and interactive

• Can include overlays or mobile-specific variants

Final Thoughts

Adding a background image in a Squarespace gallery section is an easy way to add some life to your website and keep it on brand. You can get beyond Squarespace’s limits, and with a few lines of CSS, you can create a visually stunning layout that mixes photos, color, and texture easily together.

If you’re a photographer, creative business owner, or brand that’s focused on product photography, this tweak will help your galleries pop and still look clean and responsive. A well-picked background image not only spruces up, but also deepens and improves your site’s visual story.

---

Frequently Asked Questions

• 1) Is it possible to add the background image to any section in Squarespace 7.1?

  Yes. Squarespace provides you with color options only in the editor, but you can apply background images to any section (including the gallery section) if you target a unique section ID with a little CSS.

• 2) Where can I find my section ID?

  For your live site, right-click that section, select Inspect, then find the data-section-id="..." attribute. Each of those sections has an ID, which you’ll use in your CSS.

• 3) What dimensions should my background image have?

  Use JPG or WebP, ideally a well-compressed one below 1MB for speedy load time. Select a high resolution (2000px+ wide) which will looks sharp on desktop, but compresses nicely for mobile.

• 4) Will my images in the gallery still be clickable?

  Yes. The background image is sitting behind the gallery via CSS. Your gallery content will still support all devices anywhere.

• 5) I read all of this, but the black or white splotches were not emphasized enough for readability.

  Absolutely. A semi-transparent overlay (black, white, or brand color) can be included to enhance text or caption readability without sacrificing the visual expression of the background image.