Site Background Image

Background image

This tutorial covers how to add a background image to the entire site. Images/photos work best if they are at least 2000 pixels wide.

Note: you must enable the Advanced Design bundle to use this feature.

Demo: Site Background Image

1

Set Theme Layout Style to Boxed

The background image won’t display if the theme layout style is set to Wide. You must change it to Boxed.

  1. Go to the Express toolbar and select Design.
  2. Click on the Configure button in the Active Theme (this is the first theme that appears in the list).
  3. Scroll down and expand the Layout section. 
  4. Select Boxed from the Layout Style drop-down.
  5. Click Save configuration.

Note: Some themes are only available as Wide or only available as Boxed and cannot be changed. Check Theme Descriptions to see the details of each theme.

Theme Layout Style

2

Upload an Image

Use the File Content Type to upload a large background image. Once your image has been uploaded, you’ll see a selection of Image URLs to choose from: Backstretch, Large, Medium and Small. Select and copy the Backstretch photo link.

  1. Go to the Shortcuts toolbar and select Add Content. 
  2. Select File from the list of options.
  3. Enter a Title and Description.
  4. In the File Attachment section, click Choose File. 
  5. Click Upload to upload an image.
  6. Click Save.
  7. You’ll see a selection of Image URLs to choose from: Backstretch, Large, Medium and Small. Copy the Backstretch URL to your clipboard.

Background photo file content type

3

Sitewide Placement of Background Image

Use context to place your image as a background on your site.

  1. Go to the Express toolbar and select Structure.
  2. Select Context from the list of options.
  3. Click Edit next to the sitewide context. 

    Sitewide context
  4. Scroll to the Reactions section.
  5. Select Backstretch from the <Add a reaction> drop-down. 

    6. Selecting Backstretch
  6. Paste the image file URL (from Step 1) into the Backstretch URL field.

    Backstretch screen with URL of image
  7. Click Save.
4

Change Site Background Image

You may change the site background image by uploading a new image to the site background file you created. 

When you have several uploaded images to the site background file, you may easily switch images. Edit the site background file and use the crosshairs to drag the image you want to display to the top of the list. Your site background image is automatically updated.

Related: See the Rotating between Files step in the Upload Files tutorial.

5

Remove a Site Background Image

  1. To remove a site background image, Edit the sitewide context. 
  2. In the Reactions section, click on Remove next to Backstretch.
  3. Click Save.

remove backstretch

Related Articles