Section background art

Add unique background art generated specifically for your site.

Last updated November 16, 2023

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.

If you have art of your own you want to use as a background, upload background images or videos. Learn about all your background styling options in Styling your site background.

Accessing this feature

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:

  1. Open the Pages panel and click the page with the section you want to edit.
  2. In the top-left corner, click Edit.
  3. Click the section's pencil icon, then click Background.
  4. 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.
  5. For variations on the design, click one of the small circles that appears over the tile.
  6. To customize the art, click the settings icon to open the details panel. To learn more, visit the section below.
  7. Set the Background Width by selecting Full Bleed or Inset.
  8. 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.

The_settings_icon_on_section_background_art.png

The_settings_icon_on_section_background_art.png

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.

For example:

  • 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.

Create_striking_visual_animations_with_section_background_art.gif
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.