Background images display behind your site content, adding a visual element to help set the tone for your site. You can add site-wide background images in these template families:
- Aviator - The Info Page also supports a page-specific background image.
All background images can be set to full-bleed, so they fill the page to the edges of the browser.
Tip: 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.
Watch a video
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.
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.
Add the image
To add a site-wide background:
- In the Home Menu, click Design, then click Site Styles.
- Look for a tweak named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it, and add your image.
- Style the image, then click Save to publish your changes.
In Adirondack, the tweak looks like this:
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.
- Click Search For Image to reuse an image you've added previously, or to add a free or premium stock image.
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.
For Auto or Contain, the site background color may display behind the image. Use the Repeat tweaks to adjust this.
Set the position of the background image:
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.
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 these tips 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 or banner image loads.
See how your site looks on mobile
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.
- When choosing a background image, the image shape can make a big difference in how it displays on mobile.
- See our troubleshooting tips for tweaks that work well on mobile.
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
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 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.
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.
- Cover Pages - Cover Pages are available in every template, 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.
- 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.
- 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.