Parallax scrolling images are all-the-rage these days and Gutenberg has made it really easy to add this style of image to your posts.
On top of this, there are a number of settings that you can use to enhance the image further, including transparency and cover overlays.
I’ll explain parallax images a little more and give a quick tutorial on how to do it in Gutenberg.
Parallax describes the apparent change of position of an object when viewed from different angles. And using it on websites is becoming popular. W3schools.com defines it as…
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
Some will say that a fixed image isn’t parallax, with some arguing it more than others, but that’s not an argument I wish to get into. Many sites use a fixed background as a parallax effect. Indeed, if we head back to W3schools.com again, they actually use
background-attachment: fixed to create their parallax effect
Here’s a demo of where the background image is moving but at a slower speed. With Gutenberg, we’re going to fix the image instead, so it doesn’t move.
Here, we have our standard image. If your theme supports it, you can make it more impressive by setting it to a wide or full width output.
However, we want to use the block “cover image”. This is designed for adding punchy images at the top of posts, but it can be used anywhere within your post.
Ensuring the block is highlighted, check the block settings in the right-hand menu – you need to look for cover settings and overlay. The parallax style is added by switching on “fixed background”. Ensure the overlay colour is clear and opacity is zero.
This is the result…
You can also add opacity to your parallax image. Here is it, with 50% opacity…
Finally, with the same opacity, the same image with a blue overlay…
If you’re aware of a Gutenberg block that performs a non-fixed parallax effect on images, please let me know.
Thanks to Edd Hurst from Pragmatic for telling me about this feature.
7 replies on “Gutenberg: how to create a parallax image”
Dear David. How can I put the cover image with 100% width? In one of my webs is settled as an imagen.
Thanks in advance.
Hi David. This is dependant on your theme and whether it’s received the appropriate updates for Gutenberg compatibility.
Fixed background feature in Gutemberg apparently doesn’t work in iOS devices; do you know how to make it work?
No. But I know why.
Due to the way that iOS scales images, the fixed image was appearing blurry. The core team decided to disable the feature on iOS rather than have poor quality images appear instead.
You can read about this, here: https://github.com/WordPress/gutenberg/issues/4133
I’ve just tried this tutorial. However the Cover block has text in the center that reads “Wrte title…” I see no way in the block editor to get rid of this. Any suggestions
If you don’t add any text of your own there it will disappear when you move outside the block – this is just an example of test that can go over the image, if you want it. But it’s optional.
[…] How to create a parallax image in Gutenberg […]