
How to Add Custom Background Art to Squarespace Sections: Complete Guide
Add unique background art to create eye-catching sections on your Squarespace site. The platform offers various animated patterns, gradients, and customizable shapes for dynamic visual interest.
Background art works with automatic layout, portfolio, and block-in-page sections. Note that gallery and collection sections don't support this feature.
To add background art:
- Open Pages panel and select your target page
- Click Edit in the upper left corner
- Click the section's pencil icon, then Background
- Select Art and choose a block to preview
- Adjust design variations using the circles above the block
- Customize further with the settings icon
- Set Background Width (No margins or Inset)
- Save changes
Customization options include:
- Invert colors to swap color schemes
- Randomize for unexpected combinations
- Adjust patterns, movements, and shapes using sliders
- Fine-tune specific elements through toggles
Important considerations:
- Background art requires WebGL support (check at get.webgl.org)
- Ensure text remains legible against the background
- A pause button appears for animated backgrounds
- Colors derive from your site's color scheme
For accessibility, visitors can pause animated backgrounds using the button in the lower right corner. This feature cannot be disabled to ensure all users can comfortably view your site.
Remember to verify text visibility and adjust font colors through the section's color theme if needed. Test different combinations of settings until you achieve your desired visual effect.
Note: Background art display depends on browser and device compatibility with WebGL. Without support, sections will show a static background instead.
Related Articles

How to Find and Remove Demo Content on Squarespace Sites: A Complete Guide
