Is it really possible to get a parallax background image on mobile with Divi?
You've noticed it, haven't you? Every time you place a parallax background image (CSS or real), it doesn't work on the mobile version of your site.
It's such a shame and it's pissed me off more than once! And I'm sure you are too, at least if you happen to come across this article...
Don't worry, this little problem will be solved in 2 or 3 clicks and will soon become an old memory...
- 1 - What is the Parallax effect?
- 2 - CSS Parallax or Real Parallax?
- 3 - Why doesn't the parallax effect work on mobile and tablet devices?
- 4 - How to add parallax on mobile with Divi?
- 5 - Some examples of successful parallax effects (in video)
- 6 - In conclusion: no more different designs on desktop and mobile!
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - What is the Parallax effect?
The parallax effect is not new! Thanks to it, you can create original designs for your websites.
Parallax gives a depth effect and even a 3D appearance to your websites because the background of a section moves at a different speed than the foreground elements when the user scrolls down or up.
Parallax allows you to play with background images and foreground elements: with Divi, it is easy to add a section with a parallax background image and then place a text module on top.
For the effect to be completely successful:
- Your page (layout) should be long enough: if your page is too short, the parallax image will not be able to scroll to display the desired effect.
- The parallax background should not be plain: if the background is plain, the parallax effect will be missed because nothing will be seen. So prefer a textured image, a landscape photo, a gradient colour...
To learn more about the parallax effect, read this excellent article by AlsaCréation.
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
2 - CSS Parallax or Real Parallax?
This is a question you are asked every time you activate the parallax option on your background images. Whether it is within a section (blue or purple) or within a line (green)...
The "real parallax" option allows you to obtain a background that moves at a different speed from the scroll. This is a real parallax effect.
The CSS parallax option adds a CSS property to the background image, the "background-attachment" whose value is "fixed. The background becomes fixed and the content slides over it, as if the background image were "pinned" to the site background.
To better understand, I have prepared a video for you:
Depending on the needs of your project, you can play with both types of parallax.
The parallax CSS option is really interesting if you position several sections in a row with fixed and more or less similar backgrounds... Imagine stop-motion images that follow each other and create a cartoon effect 😉 in simple CSS!
3 - Why doesn't the parallax effect work on mobile and tablet devices?
Yes... This is where it gets complicated! You can get great results simply with a parallax effect but the problem is that it doesn't work on mobile...
I've always been told that, I've always read that...
It almost seems like a taboo... It seems that it's because mobile browsers (Safari mobile and others) don't accept the famous "background-attachment: fixed"...
And also for a question of site performance...
Yet nothing is used as much in scroll mode as a mobile and tablet screen, in fact it is the basis!
Well yes, I (and you) have seen some WordPress sites that use parallax effects in the mobile version! How do they do it then?
4 - How to add parallax on mobile with Divi?
The idea is to develop your parallax section as usual or as presented in the previous video.
For the moment, it works in desktop version but not in mobile and tablet...
Then, you just need to add the following piece of code:
Note: this code was created by Ed Solman.
You can add this code according to 2 options:
1 - Within your layout through the Code module available in the visual builder. In this case, the mobile parallax effect will only work here...
2 - In the Divi > Theme options > Integration tab: add this code to the "head" option section of your site. In this case, the parallax effect will be applied to the whole site.
That's all there is to it! The parallax effect of your sections is now compatible on mobile screens!
5 - Some examples of successful parallax effects (in video)
I propose you to discover some websites that use the parallax effect... Be careful, most of these websites are not WordPress websites...
This is the digitalhands.net site which uses a parallax effect that moves with the movement of the mouse. It reminds a bit of the "starry sky" effect of Particles.js. The rendering is very successful and captivating.
The Egopop. net site proposes a home screen with another parallax effect when the mouse is moved... It's simple and quite funny!
The iutopi. com site is a very good example of parallax effects when scrolling. We are in complete immersion! We almost have a "20,000 leagues under the sea" feeling 😉
The Beckett.design website is more in the "too much" category. Let's just say that the parallax effects are very nice, but they are almost in every section... It's a bit excessive, don't you think?
The le-mugs. com website is certainly the most successful design I have ever seen. I often present this site to my students during my classes.
To tell you the truth, it is a WordPress but the theme used was custom made... of course!
It uses parallax very well but if you go to this site, you will see a long loading screen, because yes, all these nested resources (images, parallax, video, SVG animation etc...) reduce the performance...
And of course, such a design leaves no room for a good SEO optimizationbecause there is little text. So, indeed, a choice is necessary...
Don't delay! Discover the Divi theme here !
6 - In conclusion: no more different designs on desktop and mobile!
In fact, without the code (seen in Chapter 4) that allows the parallax effect to be compatible with Divi on mobile, you are almost obliged to develop two versions of the site: one for computer screens (desktop) and one for mobiles and tablets.
So basically, without this code, you're happy with the design on the computer version and frustrated with the mobile version... Is that how you felt before you inserted the Ed Solman code?
In fact, this is certainly what the developers of the Restaurant Le Mugs website (previous video) were forced to do: a desktop version and then a mobile version developed on a different URL... Watch these two videos captured on mobile:
The desktop version visited on mobile shows that the theme is not responsive. However, the parallax effect works well... but half of the content is cropped. A pity!
Let's see the mobile optimized version, without parallax effect:
Indeed, this version is much more optimised for mobiles. However, there is no parallax effect anymore, too bad! This is precisely what made the website of this restaurant so particular... The developers of the site were thus forced to create 2 versions of the site...
So you get it: you don't have to compromise anymore! The parallax effect on mobile is well compatible with WordPress sites using the Divi theme!