Customize your page background

This theme utilizes the WordPress page background feature, but with a little enhancement to give you a better experience. The page background represents the overall background and not the content background, so when you upload an image, this is for the overall background body area. 

There are several background settings to give you some added flexibility such as:

  • Background Repeat
  • Background Position
  • Background Attachment
  • Background Size – Added by the theme

Setting Your Page Background

There are a few ways to get to the background settings:

  1. Go to Appearance >> Background
  2. Go to Appearance >> Customize >> Background Image

But for this tutorial, we use the first one to make it easier.

  1. Go to Appearance >> Background
  2. By default, you won’t see an image, so you will need to upload one or use one from the Media Library
    bg image setting
  3. After uploading, you should see your image like this example you see below. At this point you can either remove it or change the image:
    bg image uploaded
  4. Now you can now go through the different attribute settings that best suits your needs
  5. Click “Save & Publish

Additional Customization

Depending on what you want, you may decide to change the page content area to move upward, or perhaps adding an outer shadow or glow to the content container. This will require you to perform some custom CSS, so to achieve this, you will need to use the Custom CSS feature in Jetpack (if you use Jetpack), a plugin such as “Simple Custom CSS”, or if you are using a Child theme, then you can do your customization in the child theme’s own style.css file.

The purpose of this information is to let you know that the container you will more likely focus on is the “page” wrapper which has an ID of “page” applied to it. So any custom CSS you create will be applied to this:

<div id="page">

The current default styling for this container is:

#page { 	position: relative; 	max-width: 1300px; 	margin: 30px auto; 	background-color: #dac790; }