Change your sidebar background

Now that you have an introduction to the sidebar background feature for Seasonal, it’s time to begin making a custom change. I will section off each option for you, but to show you what the default setting looks like

Background Settings Guideline

  • Background Repeat - This will repeat the image horizontally, vertically, or both. You can also have it as no-repeat if your image is large enough.
  • Background Position - This aligns the image either to the left, right, or center within the viewable area of your sidebar.
  • Background Attachment - This will allow the image to be fixed in position, or scroll. In the case of this theme, I would recommend keeping it on Scroll
  • Background Size - Auto means the image will retain its width and height; Cover means it will scale in size as the area resizes, but some cropping may occur; Contain means the image will scale by retaining its width and height within the viewing area. I recommend the “Cover” setting, but you can use whatever works for your needs.

Remove or Change the Site Background Photo

  1. Go to Appearance >> Customize >> Sidebar Background Image
  2. To remove it so you can use a solid background colour instead, click on “Remove“
  3. To change the image, click on “Change Image“
  4. If you are changing your image, you will need to go through the other background settings: Repeat, Position, Attachment, and Size
  5. Click “Save & Publish” at the top of the customizer

NOTE When you’ve made your choice, this will be the global setting for every page of your site. The only exception is if you change this from the page or post level, which I will talk about further on…

Adjust the Overlay

The overlay is a dark layer that sits on top of your photo and sidebar. You can adjust the overlay opacity (transparency) so that your menu and other text will stand out better.

  1. Go to Appearance >> Customize >> Custom Background Image
  2. Find the “Background Overlay Opacity” setting and slide it to the left or right to adjust the lightness to darkness level.
  3. Click “Save & Publish“

Adjust the Sidebar Size

  1. Go to Appearance >> Customize >> Other Options
  2. Find “Sidebar Width in Percent” and enter in your choice. Default is 33% in width (of your browser’s window size). Make sure you only enter the number but not the % symbol.
  4. Click “Save & Publish” at the top of the customizer column.

Use a Solid Background Colour Only

  1. Go to Appearance >> Customize >> Custom Sidebar Background
  2. Click on “Remove“
  3. Go to the “Colours” tab in the customizer, and look for the “Sidebar Background Colour without Background Image” setting
  4. Use the colour selector to choose the colour of your choice.
  5. Click “Save & Publish“