This is a very brief informational post just showing by example of a change to the background in a page. I wanted to make changes to end up with the same (or a similar) background on most of the website’s pages. I also wanted the background to be a muted version of a graphic I wanted to use as the background. The muting is accomplished with gradients and is essentially masking or filtering the picture behind it.
I did this on our https://CharlesWorks.com website.
Here were the steps I performed to accomplish this:
- I logged in to the WordPress dashboard.
- Then I navigated to Pages in the left dashboard sidebar.
- I found a page I wanted to add the background to and moused over it in the page list.
- I clicked on Edit to edit that page.
- In the first module control – the blue bar (mine was titled “Section”) – click on the gear icon.
- When in there you can optionally click on Admin and change “Section” to “Main Page Background” or something meaningful to you (it’s just a label).
- Use the pulldown in the “Background” row.
- Click on the second tab under background to deal with the background gradient.
- Add a background gradient. I used these settings to provide a muted background: rgba(255,255,255,0.87) and rgba(255,255,255,0.89). You may have to experiment with them to get them to your suiting.
- The Gradient Type defaulted to Linear which was okay for my purpose.
- The Gradient Direction defaulted to 180deg which was okay for my purpose.
- The Start Direction defaulted to 0% which was okay for my purpose.
- The End Position defaulted to 100% which was okay for my purpose.
- The Place Gradient Above Background Image defaulted to No. You should set the Place Gradient Above Background Image to Yes.
- Now use the third tab under background to add the actual background picture.
- Clicking on the picture area will allow you to choose a picture from the media library to use as your background.
- Use Parallax Effect is set to No which was okay for my purpose.
- The Background Image Size defaulted to Cover which was okay for my purpose.
- The Background Image Position defaulted to Center which was okay for my purpose.
- The Background Image Repeat defaulted to No Repeat which was okay for my purpose.
- The Background Image Blend defaulted to Normal which was okay for my purpose.