Section background images

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

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.

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, events, and store 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 art. 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 backround 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. Click the section's 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, or use a stock image.
5. Set the Background Width and Overlay Opacity.
6. Click Format to change the section height, content width, and content alignment.
7. 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.
8. 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 overlaying the image
• Style the image
• Add image effects
• Edit the image
• Set the image's focal point
• Change the image by clicking Replace
• Delete the image

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. Open your Section Theme and click the pencil icon 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.

For Background Width:

• Full Bleed extends the image from one edge of your browser window to the other, spanning the width of your site.
• 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.

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, scroll down to 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 lines - Refracts image through a pattern of straight lines
• Refracted circles - Refracts image through a pattern of circles

You can customize your image effect in the details panel. To open the details panel, click an image effect, 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 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 components of the effect. To experiment with a random configuration 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.

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.