Make a visual impact by displaying an image behind your site’s content.
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.
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:
- Open the Design panel, then click Site styles.
- Look for a tweak named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it.
- 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.
- Style the image, then click Save to publish your changes.
In Adirondack, the tweak looks like this:
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 |
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:
|
| Repeat |
Make sure Size is set to Auto or Contain.
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
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 Aviator template, showing the site-wide and info page-specific backgrounds:
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.