Page Background

Set unique or global backgrounds to align with your content, enhancing visual appeal and ensuring high-resolution clarity on every display type.

Requirements

Go to SiteOriginPremium Addons and activate the Page Background Addon.

Usage

You have two options for customizing the background image on your website:

  1. Set a global page background image using addon settings: By accessing the addon settings, you can upload an image that will be displayed as the background on all pages of your website. This ensures a consistent background across your entire site.
  2. Assign a page background image on a page-by-page basis: Alternatively, you can choose to set a unique background image for individual pages. This allows you to personalize the background according to the content or theme of each specific page.

Global Background Image

Once activated, a global site background image added can be added at SiteOriginPremium AddonsPage Background: Settings

Add a global site background in the addon settings.

The following global settings are available:

Background Color: Optionally select a background color.
Background Image: Select a background image.
Background Image Display: Select the background image display property. Defaults to cover.
Retina Background Image: Optionally add a double-sized image for high-pixel-density displays.
Selector: The selector used when applying a background. The body default is typically fine but certain themes may require a different selector.

The Retina Background Image field requires the SiteOrigin Premium Retina Background Images Addon. If you don’t see the Retina Background Image field, go to SiteOriginPremium Addons to activate the Retina Background Images Addon.

Page Background Image

Add a page background by editing any page and locating the SiteOrigin Premium metabox below the content area.

The following page settings are available:

Background Color: Optionally select a background color.
Background Image: Select a background image.
Background Image Display: Select the background image display property. Defaults to cover.
Retina Background Image: Optionally add a double-sized image for high-pixel-density displays.

The Retina Background Image field requires the SiteOrigin Premium Retina Background Images Addon. If you don’t see the Retina Background Image field, go to SiteOriginPremium Addons to activate the Retina Background Images Addon.