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

Adding site-wide background images

On some version 7.0 sites, you can add a background image to display behind your site content, creating a visual element to help set the tone for your site. You can add site-wide background images in these template families:

  • Adirondack
  • Avenue
  • Aviator - The info page also supports a page-specific background image
  • Five
  • Forte
  • Momentum
  • Montauk
  • Native

All background images can be set to full-bleed, so they fill the page to the edges of the browser. If your template doesn't support site-wide backgrounds, learn how to create page-specific backgrounds.

Version 7.1 doesn't support site-wide background images, but you can add background images that display behind your site's content on most page sections.

Watch a video

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:

  • We recommend uploading images at a width of 1500 pixels to 2500 pixels. If loading issues occur, such as a background images not loading on mobile, try reducing the longest edge of all images to 1500 pixels. This will increase loading speed while still maintaining image quality.
  • Full-bleed background images often crop differently on mobile than on computers. You may want to choose a background image that can crop in a variety of ways.
  • Abstract patterns, images without text or borders, and repeating patterns generally work the best since they offer more flexibility with cropping, which will always occur to some degree.
  • Background images won't transfer if you switch templates.

Add the image

To add a site-wide background:

  1. In the Home menu, click Design, then click Site styles.
  2. Look for a tweak named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it.
  3. To add a file from your computer, click the uploader or drag your image into the uploader. Click Search For Image to reuse an image or add a stock image.
  4. Style the image, then click Save to publish your changes.

In Adirondack, the tweak looks like this:

background-image-tweak.png

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.

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

Set the position of the background image:

  • Top Left, Top Center, Top Right
  • Center Left, Center Center, Center Right
  • Bottom Left, Bottom Center, Bottom Right
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.

Style 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 site styles 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

Keep in mind:

  • You may want to make background colors partially opaque so the background image shows through.
  • A background or overlay color may display while a background image loads.

See how your site looks on mobile

The same background image displays on computers and mobile devices. 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 computer. For a quick preview as you're editing on a computer, use device view.

As the image adjusts to the longer, narrower browser screen of a mobile device, it may experience cropping or distortion. There are a couple things you can do to minimize cropping:

  • 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 settings 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 (This 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 pixelated

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 code to your site.

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 computer, 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 computer view.) Ensure your original image is less than 2500 pixels along its longest edge, as larger images may not display. In the Aviator family, 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

Example of a background image on the Montauk template.

Here's an example on the Forte template:

  • Size: Auto
  • Repeat: Repeat

Example of a background image on the Forte template.

Here's an example on the Native template:

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

Example of a background image on the Native template.

And here's the Aviator template, showing the site-wide and info page-specific backgrounds:

Site-wide and Intro Page-specific backgrounds in the Aviator template.

Add page-specific background images

There are several ways to create a background image on just one page.

  • Banners - Some templates support banner images, which display at the top of the page and may support a content overlay. In the Brine family, for example, you can use blocks in an intro area to add many different types of content on your banner.
  • Cover pages - Cover pages are available in every template on version 7.0, and support text, buttons, headlines, logos, and forms. They create a standalone page with its own style options, and don't display the site header, navigation, or footers. This makes them a great option if you want a page to stand out.
  • Index page section - In the Brine and Pacific template families, you can use an Index to add a background image behind a layout page section.

Was this article helpful?

72 out of 450 found this helpful