Add background images to parts of your site — the body, top bar, header, navigation, content, sidebar widgets and footer — and control how each image repeats, scales and scrolls. Background colours are set in Colors.
Requires GP Premium — Backgrounds module. The whole guide is a GP Premium feature; the Secondary Navigation areas also need the Secondary Navigation module.
Appearance → Customize → Background Images
Settings
The Background Images panel has a section for each area: Body, Top Bar, Header, Primary Navigation, Primary Sub-Navigation, Secondary Navigation and Secondary Sub-Navigation (with that module), Content, Sidebar and Footer (footer widget area and footer bar separately).
Upload an image, then set:
- Repeat — Repeat (both directions, good for patterns), Repeat x (across), Repeat y (down) or No Repeat.
- Size — Size (Auto) keeps the image’s own size; 100% Width stretches it across and keeps its proportions; Cover fills the whole area, cropping if needed; Contain fits the whole image inside the area.
- Attachment — the default scrolls with the page; Fixed keeps the image still as you scroll; Local scrolls with the element’s own content; Inherit takes the parent’s setting.
- Position — where the image sits, as a CSS background-position value such as
center centerorleft top.
Navigation areas have separate images for menu items in their normal, Hover and Current states, each with a Repeat option.
For a full-width image or video behind a section of a page, use a Page Hero or Content › Adding a background video instead.
All options
| Setting | Section | Choices | Default | Requires | Customizer option |
|---|---|---|---|---|---|
| Body | Background Images › Body | Image | — | GP Premium — Backgrounds | generate_background_settings[body_image] |
| Body Repeat | Background Images › Body | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[body_repeat] |
| Body Size | Background Images › Body | Size (Auto) · 100% Width · Cover · Contain | — | GP Premium — Backgrounds | generate_background_settings[body_size] |
| Body Attachment | Background Images › Body | Attachment (scroll) · Fixed · Local · Inherit | — | GP Premium — Backgrounds | generate_background_settings[body_attachment] |
| Body Position | Background Images › Body | CSS background-position, e.g. center center | — | GP Premium — Backgrounds | generate_background_settings[body_position] |
| Top Bar | Background Images › Top Bar | Image | — | GP Premium — Backgrounds | generate_background_settings[top_bar_image] |
| Top Bar Repeat | Background Images › Top Bar | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[top_bar_repeat] |
| Top Bar Size | Background Images › Top Bar | Size (Auto) · 100% Width · Cover · Contain | — | GP Premium — Backgrounds | generate_background_settings[top_bar_size] |
| Top Bar Attachment | Background Images › Top Bar | Attachment (scroll) · Fixed · Local · Inherit | — | GP Premium — Backgrounds | generate_background_settings[top_bar_attachment] |
| Top Bar Position | Background Images › Top Bar | CSS background-position, e.g. center center | — | GP Premium — Backgrounds | generate_background_settings[top_bar_position] |
| Header | Background Images › Header | Image | — | GP Premium — Backgrounds | generate_background_settings[header_image] |
| Header Repeat | Background Images › Header | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[header_repeat] |
| Header Size | Background Images › Header | Size (Auto) · 100% Width · Cover · Contain | — | GP Premium — Backgrounds | generate_background_settings[header_size] |
| Header Attachment | Background Images › Header | Attachment (scroll) · Fixed · Local · Inherit | — | GP Premium — Backgrounds | generate_background_settings[header_attachment] |
| Header Position | Background Images › Header | CSS background-position, e.g. center center | — | GP Premium — Backgrounds | generate_background_settings[header_position] |
| Navigation | Background Images › Primary Navigation | Image | — | GP Premium — Backgrounds | generate_background_settings[nav_image] |
| Nav Repeat | Background Images › Primary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[nav_repeat] |
| Navigation Item | Background Images › Primary Navigation | Image | — | GP Premium — Backgrounds | generate_background_settings[nav_item_image] |
| Nav Item Repeat | Background Images › Primary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[nav_item_repeat] |
| Navigation Item Hover | Background Images › Primary Navigation | Image | — | GP Premium — Backgrounds | generate_background_settings[nav_item_hover_image] |
| Nav Item Hover Repeat | Background Images › Primary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[nav_item_hover_repeat] |
| Navigation Item Current | Background Images › Primary Navigation | Image | — | GP Premium — Backgrounds | generate_background_settings[nav_item_current_image] |
| Nav Item Current Repeat | Background Images › Primary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[nav_item_current_repeat] |
| Sub-Navigation Item | Background Images › Primary Sub-Navigation | Image | — | GP Premium — Backgrounds | generate_background_settings[sub_nav_item_image] |
| Sub Nav Item Repeat | Background Images › Primary Sub-Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[sub_nav_item_repeat] |
| Sub-Navigation Item Hover | Background Images › Primary Sub-Navigation | Image | — | GP Premium — Backgrounds | generate_background_settings[sub_nav_item_hover_image] |
| Sub Nav Item Hover Repeat | Background Images › Primary Sub-Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[sub_nav_item_hover_repeat] |
| Sub-Navigation Item Current | Background Images › Primary Sub-Navigation | Image | — | GP Premium — Backgrounds | generate_background_settings[sub_nav_item_current_image] |
| Sub Nav Item Current Repeat | Background Images › Primary Sub-Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[sub_nav_item_current_repeat] |
| Content | Background Images › Content | Image | — | GP Premium — Backgrounds | generate_background_settings[content_image] |
| Content Repeat | Background Images › Content | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[content_repeat] |
| Content Size | Background Images › Content | Size (Auto) · 100% Width · Cover · Contain | — | GP Premium — Backgrounds | generate_background_settings[content_size] |
| Content Attachment | Background Images › Content | Attachment (scroll) · Fixed · Local · Inherit | — | GP Premium — Backgrounds | generate_background_settings[content_attachment] |
| Content Position | Background Images › Content | CSS background-position, e.g. center center | — | GP Premium — Backgrounds | generate_background_settings[content_position] |
| Sidebar Widgets | Background Images › Sidebar | Image | — | GP Premium — Backgrounds | generate_background_settings[sidebar_widget_image] |
| Sidebar Widget Repeat | Background Images › Sidebar | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[sidebar_widget_repeat] |
| Sidebar Widget Size | Background Images › Sidebar | Size (Auto) · 100% Width · Cover · Contain | — | GP Premium — Backgrounds | generate_background_settings[sidebar_widget_size] |
| Sidebar Widget Attachment | Background Images › Sidebar | Attachment (scroll) · Fixed · Local · Inherit | — | GP Premium — Backgrounds | generate_background_settings[sidebar_widget_attachment] |
| Sidebar Widget Position | Background Images › Sidebar | CSS background-position, e.g. center center | — | GP Premium — Backgrounds | generate_background_settings[sidebar_widget_position] |
| Footer Widget Area | Background Images › Footer | Image | — | GP Premium — Backgrounds | generate_background_settings[footer_widget_image] |
| Footer Widget Repeat | Background Images › Footer | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[footer_widget_repeat] |
| Footer Widget Size | Background Images › Footer | Size (Auto) · 100% Width · Cover · Contain | — | GP Premium — Backgrounds | generate_background_settings[footer_widget_size] |
| Footer Widget Attachment | Background Images › Footer | Attachment (scroll) · Fixed · Local · Inherit | — | GP Premium — Backgrounds | generate_background_settings[footer_widget_attachment] |
| Footer Widget Position | Background Images › Footer | CSS background-position, e.g. center center | — | GP Premium — Backgrounds | generate_background_settings[footer_widget_position] |
| Footer Area | Background Images › Footer | Image | — | GP Premium — Backgrounds | generate_background_settings[footer_image] |
| Footer Repeat | Background Images › Footer | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds | generate_background_settings[footer_repeat] |
| Footer Size | Background Images › Footer | Size (Auto) · 100% Width · Cover · Contain | — | GP Premium — Backgrounds | generate_background_settings[footer_size] |
| Footer Attachment | Background Images › Footer | Attachment (scroll) · Fixed · Local · Inherit | — | GP Premium — Backgrounds | generate_background_settings[footer_attachment] |
| Footer Position | Background Images › Footer | CSS background-position, e.g. center center | — | GP Premium — Backgrounds | generate_background_settings[footer_position] |
| Navigation | Background Images › Secondary Navigation | Image | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_image] |
| Nav Repeat | Background Images › Secondary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_repeat] |
| Navigation Item | Background Images › Secondary Navigation | Image | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_item_image] |
| Nav Item Repeat | Background Images › Secondary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_item_repeat] |
| Navigation Item Hover | Background Images › Secondary Navigation | Image | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_item_hover_image] |
| Nav Item Hover Repeat | Background Images › Secondary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_item_hover_repeat] |
| Navigation Item Current | Background Images › Secondary Navigation | Image | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_item_current_image] |
| Nav Item Current Repeat | Background Images › Secondary Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[nav_item_current_repeat] |
| Sub-Navigation Item | Background Images › Secondary Sub-Navigation | Image | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[sub_nav_item_image] |
| Sub Nav Item Repeat | Background Images › Secondary Sub-Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[sub_nav_item_repeat] |
| Sub-Navigation Item Hover | Background Images › Secondary Sub-Navigation | Image | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[sub_nav_item_hover_image] |
| Sub Nav Item Hover Repeat | Background Images › Secondary Sub-Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[sub_nav_item_hover_repeat] |
| Sub-Navigation Item Current | Background Images › Secondary Sub-Navigation | Image | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[sub_nav_item_current_image] |
| Sub Nav Item Current Repeat | Background Images › Secondary Sub-Navigation | Repeat · Repeat x · Repeat y · No Repeat | — | GP Premium — Backgrounds, Secondary Navigation | generate_secondary_nav_settings[sub_nav_item_current_repeat] |
Background settings can be changed in code with the option_generate_background_settings filter.