Add unique background art generated specifically for your site.
You can choose from several options when styling your site’s background. This guide reviews how to create unique background art using colors, patterns, and shapes that are generated in the Squarespace platform.
Choose an animated pattern for a lively look, or a more subtle gradient. Use a preset pattern, or customize it by setting specific shapes, sizes, and motions.
Section background art is only supported on version 7.1. If your site is on version 7.0, you can add banner images and background videos for similar effects, depending on your template.
Watch a video
Before you begin
- You can add background art to auto layout, portfolio, and block page sections. It's not possible to add background art to gallery sections or collection sections.
- Background art only appears on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test if your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background remains static.
- If your section includes text or other content, ensure that it's still visible and readable in front of your background art. To change the text color, use the font tweaks in that section's color theme.
- If your section art is animated, the section includes a pause button in the bottom-right corner. This keeps your site accessible to visitors who may find moving backgrounds disorienting. It's not possible to disable this button.
Add background art
To add background art:
- Open the Pages panel and click the page with the section you want to edit.
- In the top-left corner, click Edit.
- Click the section's pencil icon, then click Background.
- Click Art, then click a tile to preview the art in the section. The colors are pulled from the Bright options in your color palette.
- For variations on the design, click one of the small circles that appears over the tile.
- To customize the art, click the settings icon to open the details panel. To learn more, visit the section below.
- Set the Background Width by selecting Full Bleed or Inset.
- When you find the design you like, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
Customize background art details
You can customize your background art in the details panel. To open the details panel, click an art thumbnail, then click the settings icon.
Scroll through the options and settings until you find a pattern you like. Click any category to expand the drop-down menu and reveal more options. Depending on the type of background art you're starting with, different categories appear.
- In most background details panels, you can click Invert colors to switch the assigned colors.
- In any background details panel, you can click Randomize to experiment with a random configuration.
Other settings are unique to each background art style, and include sliders and toggles that change the core components of the art. We recommend experimenting with the different options in each details panel until you create a combination you love.
Here's an example of section background art.