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 has pissed me off more than once! And I'm sure you do 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?
- 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 recognize. 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 the page.
Parallax allows you to play with background images and foreground elements: with Divi, it's 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) must be long enough: if your page is too short, the parallax image will not be able to be scrolled to display the desired effect.
- The parallax background should not be plain: if the background is plain, the parallax effect will be missed because you won't see anything. So prefer a texture image, a landscape photo, a gradient color...
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 than 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?
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 seems almost like a taboo... It seems that it's because of mobile browsers (Safari mobile and others) that wouldn'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, it's even the basis!
Well yes, I've seen (and you will too) some WordPress sites that use parallax effects in 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 now, it works in desktop version but not in mobile and tablet...
Then, you just have 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 thanks to 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 in the "Header section of your site. In this case, the parallax effect will be applied to the whole site.
That's all there is to it! Now the parallax effect of your sections is 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 website which uses a parallax effect that moves with the mouse. It reminds a bit of the "starry sky" effect of Particles.js. The rendering is very successful and captivating.
The Egopop. net website offers a home screen with another parallax effect when you move your mouse... It's simple and quite funny!
The iutopi. com website is a very good example of parallax effects when scrolling. We are in complete immersion! We almost have an impression of "20.000 leagues under the sea" 😉
The Beckett.design website is rather in the "too much" category. Let's just say that the parallax effects are very nice but there are some in almost 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's 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 wait any longer! Discover the Divi theme here !
6 - In conclusion: no more different designs on desktop and mobile!
Precisely, without the code (seen in chapter 4) that allows you to make the parallax effect compatible on mobile with Divi, 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 get to enjoy the design on the computer version and get frustrated on the mobile version... Is that how you felt before inserting 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... Check out 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. Too bad!
Let's see the mobile optimized version, without parallax effect:
Indeed, this version is much more optimized 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!