Promotion - Get our lifetime membership, all themes, and updates forever for only 85 USD.

An introduction to the page background feature

This is primarily a WordPress feature that is only made available if a theme specifies to enable it which this theme does, so this quick tutorial will help you take advantage of the custom background feature. When you have a very short page in height or when using a boxed layout for your website, your page background will show. Incidentally, you do not have to use a photo or graphic background, you can use a solid colour if you wish.

Page Background Example

Here is an example screenshot with the page set in a boxed style. However, when using the “Full Width” layout, your background will only show on short pages:

rp boxed 1600

Page Background Options

  1. Image or solid colour
  2. Background image size
  3. Background image position
  4. Background image repeat (or not repeat)
  5. Background image attachment (fixed or scroll with page)
Set Your Background Colour
  1. Go to Appearance >> Customize >> Colours
  2. Look for the “Background Colour” setting and click to select your colour
    page bg colour setting
  3. Click “Save & Publish” at the top of the customizer
Set Your Background Image
  1. Go to Appearance >> Background
  2. To remove the background image, click on the “Remove” button, or to change the image, click on “Change Image“.
    remove change bg
  3. If no background image exists, upload or select an image from your media library by clicking on “Select Image“, or return to the default theme’s image by clicking on the “Default” button:
    bg image setting add
  4. Follow through to the background options for preset and image position – As you make changes, you can see it in the preview window (if visible)
    bg image option settings
  5. Click “Save & Publish” at the top of the customizer 
What Size of Image to Use?

The bigger and better quality of an image, the better, however, it does come at a page load cost in speed if you do not optimize your image. You can use any size of image you want, but if you can use a bigger image that is good quality and is optimized, go for it. Your other option is to use a repeating image or graphic; this would allow you to have an image as small as you want it. The smaller it is, the faster your page will load because the file size will be much smaller.

NOTE: When using the Boxed layout option, your main content container will have an outer shadow to give it the appearance of floating above the background.