1. Adding the Page Background Image
In this example we are starting with a project that has already content, but we also want to add a page background image to all pages. So let's do that first.
Click on 'Regular Page'.
Toggle the 'Make Changes To All Elements' switch to ON.
Open the 'Background' section and click on 'Background Image' and click on the blue 'Add Background' button.
When the Image Gallery tab opens, select the background image.
The background image has been added to all the pages, but now the text is difficult to read.
2. Adding Opacity/Contrast To The Pages
Let's make the text readable:
Click on the page area, make sure you are not clicking on any text element.
Toggle the 'Make Changes To All Elements' switch to ON.
Open the 'Background' section and click on 'Background Color' and click on color palette. For this example we have chosen a white background color.
Increase the white opacity to make the background image visible again - second image.
Notice the color opacity at 70%
This is a good balance between page color and image, we will leave it there, but feel free to experiment with other page colors and opacity levels.
3. Changing the Headers and Footers
If we want to have a page showing the image background on those areas as well, we have to repeat some of the steps.
Headers
We know we are going to use a white background color, however our header text is also white, so let's change the color of the header first to black.
Click on the header's heading area
The 'Make Changes To All Elements' switch is automatically set to ON.
Open the 'Text Style' section and click on 'Text Color' and click on color palette. For this example we have chosen a black background color.
Click on Choose.
Now all the pages headers text is in black
Click on the headers area, make sure you are not clicking on the heading element.
Click on the header's heading area
The 'Make Changes To All Elements' switch is automatically set to ON.
Increase the white opacity to 70% to make the background image visible again
Now both, the header and the page area have the same settings.
It may happen that when changing the header color the page area may revert to 100% white. If that happens, simply reduce the opacity gain to 70% - but don't forget to toggle the 'Make Changes To All Elements' switch to ON first.
Footers
In this last step we will repeat the same steps as in the header, however if you have the footer text hyperlinked there is no need to change the text color, only the footer area color.
