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 and also showing the default background that comes with this theme.
However, when using the “Full Width” layout, your background will only show on short pages, otherwise when using the boxed style, you will see this:
NOTE – The above screenshot shows the page background using a colour instead of an image.
Page Background Options
- Image or solid colour
- Background image size
- Background image position
- Background image repeat (or not repeat)
- Background image attachment (fixed or scroll with page)
Set Your Background Colour
- Go to Appearance >> Customize >> Colours
- Look for the “Background Colour” setting and click to select your colour
- Click “Save & Publish” at the top of the customizer
Set Your Background Image
- Go to Appearance >> Background
- To remove the background image, click on the “Remove” button, or to change the image, click on “Change Image“.
- 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:
- 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)
- 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.