With the Gutenberg blocks its possible to add sections which can be coloured with background stripes, or in this instance a background image with the Parallax effect.
To create the Parallax background image effect I chose to use the WordPress plugin Advanced WordPress Backgrounds.
Add the block Background (AWB) as a new block on the page.
For the block’s popup icon editor bar options select the image width and from the offered options of Full width and Wide width choose the latter.
For the block configure these settings:
- Image – Select from the media library. note image should be large enough to cover the intended area both desktop and mobile phone views. Consider an image of size 1569×852 pixels as a starting point. Dependant upon the image chosen you may also wish to experiment with the centre point, ensuring that the point of interest is not left outside of the viewing area.
- Size – Full
- Background size – cover
- Parallax – Opacity + Scroll with a speed of 0.5.
- Spacings – set a top and bottom padding value, adding enough extra space above and below your content to show the desired amount of image, for example 100px.
Because we have set the background image block to be of full width action is required to implement the centred indents.
To do this, with the background for the section configured, a column block is added within.
Click inside the image space and select to add a block. From the popup select columns if it is shown, or enter columns within the search box.
Another column is added inside this with its column number set to 1 or maybe 2 AND under its Advanced settings > Additional CSS class(es) a value of container entered.
The nesting of columns is covered more fully in the article WordPress Gutenberg Adding Full Width Background Stripes.
The amount of the image which is visible, vertically, is governed by the content added. The background image plugin offers a spacing option where the top and bottom padding can be set
In the image options cover is selected to tell the browser to scale the image, without distorting it, such that the rectangle of defined area is completely covered.
