Page Background

3 min read Updated

The Page Background Addon adds a background color or a background image to the whole page. Set one background for every page of your site in the addon settings. Then change it on a single page or post when you need to.

Requirements

Go to SiteOriginPremium Addons and activate Page Background.

Set a Background for the Whole Site

  1. Go to SiteOriginPremium Addons.
  2. Find Page Background and click Settings.
  3. Set a Background Color, a Background Image, or both.
  4. Click Save.

The Page Background Settings dialog with a background color, image, Cover display and body selector

The global background shows on every front-end page, including archives and search results. At the moment, the blog posts page and archive pages show the background of the first post in the list instead, when that post has its own background.

Set a Background for One Page

  1. Edit the page or post.
  2. Find the SiteOrigin Premium metabox below the content. Open Page Background.
  3. Set the background.
  4. Save the page.

The Page Background section of the SiteOrigin Premium meta box with a background color, image and Fixed display

A page setting replaces the global setting of the same name. Settings you leave empty on the page use the global value. For example, set only a Background Color on a page, and the page shows that color with the global Background Image on top.

The page’s Background Image Display starts at the global value. When you save the page, the page keeps its own value. A later change to the global value doesn’t change it.

Settings

The addon settings and the Page Background tab have the same settings, except Selector, which is in the addon settings only.

Background Color
The background color. It also shows behind a background image with transparent areas.

Background Image
Choose an image from the Media Library. You can enter an image URL in the External URL field instead.

Background Image Display
How the image fills the page. Default: Cover.

  • Tiled Image: the image repeats across the page.
  • Cover: the image fills the page. It is centered, and the edges can be cropped.
  • Centered, with original size: the image shows once, centered, at its own size.
  • Contain: the image scales to fit the page. Unless your theme stops it, the image repeats to fill the rest of the page.
  • Fixed: as Cover, but the image stays in place while the page scrolls.
  • Parallax: the image moves more slowly than the page as it scrolls. If Page Builder is active, keep its Parallax Type setting at Modern (SettingsPage Builder).

Retina Background Image
A second image for high-density screens, such as Retina displays. Use an image twice the width and height of the Background Image. This setting shows only when the Retina Background Images Addon is active. It is hidden when Background Image Display is Parallax.

Selector
The CSS selector that gets the background. Default: body. With the Vantage theme (not a child theme), the default is #main.site-main. Change it only if your theme covers the body background.

Advanced Customizations

The siteorigin_premium_page_background_selector filter sets the default Selector. After you save the addon settings, the saved Selector is used instead.

The siteorigin_premium_page_background_css filter changes the CSS declarations before the addon prints them. For example, to blend the background image with the background color, add this to your child theme’s functions.php file:

add_filter( 'siteorigin_premium_page_background_css', function( $css ) {
	return $css . 'background-blend-mode: multiply;';
} );