Section background images

Add and customize background images for your site’s page sections.

Last updated January 2, 2025

There are several ways to style your site’s background. One option is to add background images to page sections and customize those images with a variety of image effects. This is a great way to create page banners and striking visual elements that match your brand.

This guide reviews how to add and customize photos and other background images you upload to Squarespace. Learn about all your background styling options in Styling your site background.

Accessing this feature

This guide is for 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

  • Auto layouts, portfolio sections, and all block sections support adding background images. You can also add background videos and background art to these sections.
  • It's not possible to add background images to gallery sections, but you can add a background color, or use the Slideshow: Full layout for a similar effect.
  • Blog, course, events, store, and video sections don't support background content, but you can add a background color.
  • If your section includes text or other content, ensure that it's still visible and readable in front of your background. To change the text color, use the font tweaks in that section's color theme.
  • Background images crop automatically based on the amount of content in the section and the size of the visitor's browser screen. To choose how an image crops, use an image block. To learn how background images appear on mobile, visit How will my site appear on mobile devices?

Image formatting tips

Check the formatting for your images before uploading to your site. For background images, follow these guidelines:

  • Use images between 1500 pixels and 2500 pixels wide.
  • Don't use images with text in the actual image file. Instead, add text over the image.
  • If you're going to add text over the image, use an image with an abstract pattern.
  • For image file types and complete image requirements, visit Formatting images for the web.

Add background images

Use a background image to add contrast with text or other content overlaying the section, or create a banner when the section is at the top of the page.

To add a section background image:

  1. Open the Pages panel, then click the page with the section you want to edit.
  2. In the top-left corner, click Edit.
  3. Hover over the section and click the pencil icon, then click Background.
  4. Click Image, then click +. Choose an image source from the drop-down menu to upload an image, reuse a previously uploaded image, use a stock image, or use a stock background.
  5. (Optional) Click Image Effect to select an image effect.
  6. (Optional) Style the image with Background Width and Overlay Opacity.
  7. (Optional) Click Format to change the section height, content width, and content alignment.
  8. (Optional) Click Colors to select a color theme for the overlay and any content added. To learn more, visit Changing colors. If you remove the image, the overlay becomes the section's background color.
  9. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

After adding an image, you can:

Add text or other content

You can add text or other content over a background image. Because the text that you add adapts to fit any screen size or mobile device, this is a great way to add text if you're using the background image as a banner.

Tip

If you want a text-only message at the top of your site, add an announcement bar instead of a banner.

We don't recommend using a background image that has text in the actual image file for a couple reasons:

  • Computers can't read this text, so search engines won't index it for results.
  • When your image changes shape to adapt to different browser widths, parts of the text will get cropped.

To add text or other content:

  1. Click Edit on the page with the background image.
  2. Click Add Block or an insert point to add a text block. Click into the block to add text, then use the Format drop-down to choose a paragraph style.
  3. Add more text blocks or other content to the section (like a button block).
  4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Text styles

Your site's style settings in the Design panel set how text displays on your background image.

  • To change your site's fonts, choose a font pack and base size in the Fonts panel. Scroll to Assign Styles to style specific text. To learn more, visit Changing fonts.
  • To change your font color, choose a palette and theme in the Colors panel. Click the pencil icon on your section's theme to style specific elements within that theme. To learn more, visit Changing colors.

Watch a video

Style background images

To style the background image, click Edit on the page, click the pencil icon on the banner's section, then click Background. You can set the Background Width and the Overlay Opacity.

Background Width

For Background Width:

  • Full Bleed extends the image from one edge of your browser window to the other, spanning the width of your site. This is typically the setting used for banner images.
  • Inset indents the image slightly and creates a border around the image.

When the image is set to Inset, you can set the border color.

Overlay Opacity

Overlay Opacity sets the opacity of the color overlay of your background image.

There's no right amount of opacity to use, so we recommend trying out different settings to figure out what works for you. Generally, we recommend a higher percentage if the section has a lot of content, as that can help set the content apart from the background image.

The color of the opacity is set by the Background Overlay tweak in your section's theme. To learn more, visit Changing colors.

Note

If you upload a .png file with a transparent background, the browser will always display a white background behind the image. To change this background color, you'll need to edit the image in a third-party image editing software before uploading it to your site.

Resize background images

To change a background image's height:

  1. Click Edit on the page, then click the pencil icon on the background image's section.
  2. In the Format tab, under Section Height, select a preset height or click ... to set a custom height. If you're editing a Fluid Engine section, you can change the height of the section's grid by clicking and dragging the blue arrow icon in the bottom-right corner.
  3. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

The section height affects how the background image crops on both computers and mobile devices. We recommend testing different heights to get the look you want.

In classic editor sections, background image height also depends on the amount of content on the section. To increase the height without adding visible content, add spacer blocks.

Although background images typically span the width of the site, you can style the background image to include a border around it. This gives the appearance of reducing the image's width.

Add background image effects

After adding a background image, you can add effects to give the image a more stylized look. Some effects add an animation so the image is always moving, while others only appear as the visitor scrolls through that section of your site.

To add an image effect:

  1. After adding a background image in the section editor, click Image effect in the Background tab.
  2. Choose an effect from the menu. To customize the effect, click the settings icon to open the details panel. Any changes you make to the effect will appear in your site preview. To learn more about your options, visit the section below.
  3. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Keep in mind:

  • Image effects only appear 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.
  • Image effects don't apply to background art or background videos, even if the video uses a mobile fallback image.

Image effect styles

You can choose from these image effects:

  • None - No effect, aside from overlay opacity setting
  • Liquid - Gives image a rippling effect
  • Film grain - Adds an animated static overlay to the image
  • Parallax - Image moves as visitors scroll
  • Refracted circles - Refracts image through a pattern of circles
  • Refracted lines - Refracts image through a pattern of straight lines

You can customize your image effect in the details panel. To open the details panel, click an image effect, then click the settings icon.

The settings icon appears when you click one of the image effects in the section editor

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 image effect, different categories appear.

For example, you can:

  • Edit the size and shape of the effect.
  • Edit the speed and direction of effects with motion, like Liquid.

Other settings are unique to each image effect, and include sliders and toggles that change the core elements of the effect. To experiment with a random mix of settings, click the shuffle icon when choosing an effect or click Randomize when in the effect's details panel.

We recommend testing each effect to get a better sense of what it looks like and how it works for your site.

Here's an example of a section background image with the Liquid effect.

Section_background_image_with_the_Liquid_effect.gif

Remove a background image

To remove a background image:

  1. Click Edit on the page, then click the pencil icon on the banner's section.
  2. Click Background.
  3. Click Delete.
  4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Section backgrounds as banners

A section with a background image at the top of the page can serve as a visual focal point to set the tone for your content. An image like this is commonly called a banner.

Banner images typically stand alone without other content on the section or have very simple text, like a title, overlaying them. You can also create banners with other types of backgrounds, like videos or art, for a different aesthetic.

Even though you may use them differently, banners work the same as any section with a background image, so you can follow the steps in this guide to:

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.