Get all themes with lifetime updates for 95 USD. View all promotions

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.

Transparency – The main content area has a slight transparency to show the background image behind it. There is no setting to control this, but to change it, copy the following CSS code into your customizer’s Additional CSS tab:

#page {     background-color: rgba(255,255,255,0.93); }

The 255, 255, 255 part is the colour of white and the 0.93 is for the transparency level. Basically this means 93% transparency. If you want no transparency, then you would make 0.93 as 1

Page Background Example

This is an example of adding a page background image to your web site pages:

devise custom background

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.