Set unique or global backgrounds to align with your content, enhancing visual appeal and ensuring high-resolution clarity on every display type.
Requirements
- SiteOrigin Premium Plugin
- SiteOrigin Widgets Bundle Plugin
- Optional: Page Builder by SiteOrigin Plugin
Go to SiteOriginPremium Addons and activate the Page Background Addon.
Usage
You have two options for customizing the background image on your website:
- 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.
- 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
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
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.