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.