Page Background Changes Example in a Divi Site

by | Oct 4, 2021 | WordPress

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.
CLICK HERE to find your domain name!   CLICK HERE to transfer your domain name!

Resource Categories

Archives