Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Adding a background image

Background images display behind your site content, adding a visual element to help set the tone for your site. 

You can add background images on many Squarespace templates. Background image styles vary by template, but most are site-wide, meaning the same image displays on every page of your site. All background images can be set to full-bleed, so they fill the page to the edges of the browser. 

Best practices

The type of image you choose depends on your personal aesthetic and your site's goals, but here are a few general guidelines:

  • For full-bleed background images, we recommend uploading images at a width of 1500 pixels to 2500 pixels. 
  • Abstract patterns and images without text or borders generally work the best since they offer more flexibility with cropping, which will always occur to some degree.
  • Repeating patterns give the greatest flexibility when you're styling how the image displays.
  • Background images won't transfer if you switch templates.

Image shape

Full-bleed background images often crop differently on mobile than they do on desktop, because mobile devices are typically viewed in portrait orientation.

When choosing a background image, consider how visitors will access your site:

  • If you anticipate that most of your visitors will view your site on mobile, you can minimize cropping by choosing a background image that's taller than it is wide.
  • If most visitors will be visiting on desktop,  use an image that's landscape-oriented, or close to square.
  • For mixed-use sites, choose a background image that can crop in a variety of ways.

Supported templates

The following templates support site-wide background images. This list groups templates by family.

  • Adirondack
  • Avenue
  • Aviator, Aubrey, Encore - Additionally, the Info Page supports a page-specific background image.
  • Five
  • Forte
  • Momentum
  • Montauk, Julia, Kent, Om
  • Native
Tip: You can create a page-specific backgrounds on any template using Cover Pages. Many templates also support banner images.

Step 1 - Go to the Style Editor

In the Home Menu, click Design, and then click Style Editor.

Note: To add a page-specific background image to the Aviator, Aubrey, or Encore template, first go to the Pages panel and open the Info Page. Open any other page type to add the site-wide background.

For more help using the Style Editor, visit Making Style Changes.

Step 2 - Add an image

The tweak name varies by template, but look in the Style Editor for a tweak named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it. 

To use one of your own images, drag your image into the image uploader. You can also click the image uploader to open a file selection menu and then select a file from your computer.

Alternatively, click Getty Images to license a stock image for $10. This is a great option if you don't already have an image to use. To learn more, visit Getty Images and Squarespace overview.

Step 3 - Style and crop the image

After adding the background image, use the options below the image uploader to style the image and fix any cropping or distortion you might be seeing.

Position

Set the position of the banner image:

  • Top Left, Top Center, Top Right
  • Center Left, Center Center, Center Right
  • Bottom Left, Bottom Center, Bottom Right
Size
  • Auto - The image retains its original width and height. This is good for smaller images that you want to repeat.
  • Cover - Scales the image as large as needed to completely cover the background area (full-bleed). As a result, the full image might not display. The image may look different on each page depending on the height of the page content.
  • Contain - Scales the image so its longest edge (width or height) fits inside the browser. 

For Auto or Contain, the site background color may display behind the image. Use the Repeat tweaks to adjust this.

Repeat

Make sure Size is set to Auto or Contain

    • No-repeat - Display the image once.
    • Repeat - Repeat the image so it covers the entire background.
    • Repeat-X - Repeat the image across the horizontal axis only.
    • Repeat-Y - Repeat the image across the vertical axis only.

For No-repeat, Repeat-X, and Repeat-Y, use the Position options to further adjust where the image displays.

Fix Position

When checked, the image's position remains stationary behind scrolling content. When unchecked, it scrolls up and down with the page.

On many mobile browsers, including iOS, this feature has no effect, and the image will scroll with the page.

Step 4 - Adjust other site areas

How much of your background image displays depends on how you set up your other site elements. The style options and tweak names vary from template to template, but use your Style Editor to experiment with some or all of the following areas of your site:

  • Main content area (or "canvas") background
  • Header background
  • Footer background
  • Site width and content width
Tip: You may want to make background colors partially opaque so the background image shows through.

Step 5 - Save

Click Save to publish your changes.

Step 6 - See how your site looks on mobile (optional)

The same background image displays on desktop and mobile. To see the effect, it's a good idea to keep your phone close by, and refresh your site on the phone after saving changes on a desktop computer. For a quick preview as you’re editing on a desktop, use Device View

Tips:

  • When choosing a background image, the image shape can make a big difference in how it displays on mobile.
  • See our troubleshooting tips for Style Editor tweaks that work well on mobile.

Troubleshooting

My background image distorts on certain pages or on mobile

This occurs when the background image is stretching to cover the length of the browser window. This is especially true for Blog Pages or Events Pages set to List View, since they are typically longer than other pages, and for mobile, where page content stacks vertically. The taller the page content, the more stretched the background will be to fully cover it, and the more zoomed in it will appear. 

To fix this, open the background image tweak (see Step 3 above) and try one or both of these options:

  • Check Fix position (Note: won't affect some mobile devices, including iOS)
  • Select Size: Contain or Size: Auto

You may also want to experiment with the Position options to see which version resizes best on long pages and mobile display.

My image is blurry or pixilated

This occurs when an image is stretching beyond its original dimensions to fill the background area. 

For full-bleed images, we recommend uploading images with a width between 1500 and 2500 pixels for most sites.

Note: We don't recommend uploading background images that are greater than 2500 pixels along their longest edge. Site-wide background images always load the original image size. If your background image is wider than 2500 pixels, it may cause issues for your visitors.

Background images and custom code

Custom code you've added to your site may interfere with how your background image displays. If you're troubleshooting issues with your background image, temporarily disable any custom code to see whether the issue is code-related. To learn more, visit Adding custom HTML, CSS, and JavaScript.

Mobile display

Here's how you can use style tweaks to fix common mobile display issues. Since there aren't separate tweaks for mobile and desktop, it's a good idea to experiment with these options to see which ones give you the best look.

  • Zoomed-in or distorted image - Set the image to Size: Contain or Size: Auto. You may also need to upload a larger image, up to 2500 pixels along its longest edge.
  • Background image size changes on different pages - Set your image to Size: Contain or Size: Auto.
  • Image centered incorrectly - Use the Position options to adjust where your image displays on the page.
  • Background image not displaying - Your main content background color may be covering the image. Adjust its transparency to reveal the background image. (This will also affect the desktop view.) Ensure your original image is less than 2500 pixels along its longest edge, as larger images may not display. In Aviator, Aubrey, and Encore, ensure the Mobile Background Image tweak is checked.
  • Image not covering the whole container - Select Size: Auto or Size: Contain and Repeat the image to cover any blank areas.

Examples

Experiment with options in the background image tweak to find the perfect arrangement for your background image. We've included a few examples below to help inspire you.

Here's an example on the Montauk template:

  • Size: Cover
  • Fixed position
  • Canvas Background color set to partially opaque

Here's an example on the Forte template:

  • Size: Auto
  • Repeat: Repeat

Here's an example on the Native template:

  • Position: Top Left
  • Size: Auto, Repeat-Y
  • Site background color: Blue

And here's the Encore template, showing the site-wide vs Info Page-specific backgrounds:

  • Aviator, Aubrey, and Encore have this functionality.

  • Bedford, Anya, Bryant, Hayden
  • Marquee, Adversary, Alex, Eamon, Shift

Format the page description text to create a button in the last line.

  • Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne

Add a Button Block to the intro area on a page with a banner.

Here's how that looks in the Brine template:

Other options

Some templates have other editable areas where you can add a Button Block:

  • Page headers, sometimes called intro areas, display above the page content on individual pages.
  • Depending on your template, content sidebars can display on some or all pages.
  • Most templates support an editable site-wide footer, if you'd like to have your call to action be the last thing visitors see. Some templates also support page footers.

Tips

  • To maximize your impact, we recommend keeping your call to action short and sweet. Try a single word, like "Donate," or a short key phrase, like "Take action."
  • For help formatting your button's link, visit Adding links to your site.
  • To style the button, visit the Style Editor, then click the button to see relevant tweaks. The available style options depend on the type of button and your template, but typically you can choose the color, shape, and background.
  • If you want visitors to subscribe to a newsletter, use a Newsletter Block. To gather information, use a Form Block. For donations, try the Donation Block. These blocks all include a customizable button.
Was this article helpful?
12 out of 92 found this helpful