Customize your page background

Preference comes with a split page background where the top half is a solid colour (white) and the bottom half uses a combination background colour (grey) and transparent pattern image. In addition to this, the main content floats on top of this. However, you can change the backgrounds for the top and bottom half, although this will be done in three parts because one uses the WordPress background function, while the other (the top half) uses a theme custom option.



Part 1 – Let’s Change the Top Half First

  1. Go to Appearance >> Customize >> Click on the tab labeled as “Colors
  2. Find the setting for “Top Half Page Background” colour (default is white #ffffff) and click on the colour selector to open the colour palette
  3. Find the colour you want and see it in real time in the right window as you move the colour cursor around.
  4. When you are happy with the colour, click Save & Publish

Part 2 – Let’s Change the Bottom Half


With this option, there are a couple ways we can change the page background using the built-in WordPress background function, either by the customizer (which we just used to change the top half) or we can use the standard method of accessing it from the dashboard Appearance menu group where you will see “Background” showing there.

However, if you just changed the “top half” of the page and the customizer is still open (that is, you did not click Close), we can do the bottom half while still in the customizer. We will do this assuming you want to change the background pattern image, but you can remove the image and just use a solid background colour:

  1. Click on the tab labeled as “Background Image” which should show a long panel like this:
  2. Now click on the pattern image (the grey pattern) with a little drop arrow button to change the image. Now your panel just got a little bigger with the upload function ready for you to load your own.
  3. Continue with the other settings for repeat, position, and attachment
  4. Click Save & Publish when you are happy with your changes

NOTE: There is a small thin line that goes across the background which separates the top and bottom half, so you may need to change the colour of this one. Luckily I have a colour setting for this as well.

Part 3 – Changing the Line Colour

  1. While you are still in the Customizer, click on the “Colours” tab and then look for the “Top Half Bottom Line” and then click on the colour selector to change the colour.
  2. When done, click Save & Publish
  3. Now if you are happy with all background changes, you can now click “Close