A key feature of your Gadsden website theme is the ability to add a “background image.” These photographs sit in the background of your page on one-column layouts, behind the action form on desktop and above the action form on mobile.

Note: In order to enable background images on your page, you must first select the page’s one-column layout as described in this documentation. Background images are not supported on Gadsden’s two-column layout.

Background photos will automatically be cropped and scaled to fit on any screen size.

How to add a background image for a single page

In order to match your background image to your page’s content, and create a visual distinction between pages on your website, Gadsden allows you to assign a unique background image per page.

To add a header image to your page, navigate within NationBuilder’s control panel to Website > Pages > [The Page] > Settings > Feature content sliders. 

There, create a new “slider” as follows:

• Label: Background Image
• Headline / Action text: [leave intentionally blank]
• Page to feature: [enter the slug of the current page]
• Image: Upload your preferred image.
• Status: Published

The “slider” will not appear as a “slider” in the traditional sense. It will appear as the background image, only.

How to add a site-wide background image

In addition to a per-page header image, you may also opt for a site-wide background image. This image would show, by default, on every page with a one-column layout. 

To add a site-wide header image, navigate within your NationBuilder control panel to Website > Site settings > Background image. There, upload your preferred image. 

Note: If you have specified a background image for an individual page, as described above, then that image will override the site-wide background image for the relevant page.

Optimizing background images

To ensure that your background images are optimally sized, and that they load quickly, we recommend the following:

• Crop your image to a 16:9 aspect ratio (ex: 1600 x 900 pixels).
• Use a service like TinyPNG to compress the image to its smallest possible size.
• Finally, upload your image within your NationBuilder control panel.