Decorative Section Background Images

What You'll Create

Decorative images placed on top of or behind your section content—like corner flourishes, watermarks, or accent graphics—without adding extra image blocks that complicate your layout.

The Problem It Solves

Squarespace only allows one background image per section. If you want to add decorative elements like corner graphics, subtle patterns, or branded watermarks while keeping your main background, you'd normally need to composite images externally or add floating image blocks that mess with your layout.

Perfect For

Corner flourishes and decorative accents, Brand watermarks and logos, Subtle pattern overlays, Decorative borders and frames, Seasonal or thematic embellishments

What Makes This Different

This technique adds decorative images as an invisible layer on your sections—completely separate from your actual content blocks. You choose whether the decoration appears in front of or behind your content, control exactly where it's positioned (any corner, edge, or custom location), and set the size and whether it repeats. Works whether your section has a background image or not, with slightly different approaches for each scenario.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS

  • Prerequisites: Section with an ID, hosted image URL for your decorative graphic

  • Toolkit Title: Section Decor using Background elements

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Previous
Previous

Page Loading Animation with Custom GIF

Next
Next

Show/Hide Sections Based on Dropdown Selection