Is it really possible to get a parallax background image on a mobile phone with Divi?
You noticed that, didn'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 do too, at least if you get to this article....
Don't worry, this little problem will be fixed in 2 or 3 clicks and will quickly become an old memory...
- 1 - What is the Parallax effect?
- 2 - CSS Parallax or Real Parallax?
- 3 - Why does the parallax effect not work on mobile phones and tablets?
- 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!
Advertisement: 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! It is thanks to him that you can create original designs for your websites.
Parallax (or parallax) gives your websites a depth effect and even a 3D appearance 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 is easy to add a section with a parallax background image and then place a text module on it.
For the effect to be completely successful:
- Your page (layout) should be long enough: if your page is too short, the parallax image cannot be scrolled to display the expected effect.
- The parallax bottom should not be united: if the bottom is united, the parallax effect will be missed because we will not see anything. So prefer a texture image, a landscape photo, a gradient color....
To learn more about the parallax effect, read this excellent article from 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 that is asked each time you enable the parallax option on your background images. Whether 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 speed different from the scroll. This is indeed a parallax effect in the strict sense of the word.
The CSS parallax option adds a CSS property to the background image, it is 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 background of the site.
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 CSS parallax 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 one another and create a cartoon effect 😉 in simple CSS !
3 - Why does the parallax effect not work on mobile phones and tablets?
That's 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 of the mobile browsers (Safari mobile and company) that wouldn't accept the famous "background-attachment: fixed"...
And also for a question of site performance…
However, nothing is used as much in scroll mode as a mobile and tablet screen, it is even the basis!
Well yes, I have already seen (and you 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 the moment, it works in desktop version but not in mobile and tablet version....
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 tab Divi > Theme option > Integration add this code in the section "head" of your site. In this case, the parallax effect will apply to the entire site.
That's all there is to it! Now, the parallax effect of your sections is now compatible on mobile screens!
5 - Some examples of successful parallax effects (in video)
I suggest you to discover some websites that use the parallax effect... Be careful most of these sites are not WordPress sites...
This is the digitalhands.net site that uses a parallax effect that moves with the movement of the mouse. It reminds me a little bit of the "starry sky" effect of Particles.js. The rendering is very successful and captivating.
The Egopop.net site offers a home screen with another effect parallaxed to mouse movement... It's simple and quite fun!
The iutopi.com site is a very good example of parallax effects on scroll. We're in full immersion! We almost have an impression of "20,000 leagues under the sea" 😉
The Beckett.design website is more in the "too much" category. Let's just say the parallax effects are very nice but there are some in almost every section... It's a little 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 created to measure... 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 performance...
And of course, such a design does not leave room for a good SEO optimizationbecause there is little text. So, indeed, a choice must be made...
Don't delay 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 makes it possible to make the parallax effect on mobiles compatible 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 enjoy the computer design and you're frustrated with the mobile version... Is that what you felt before you inserted Ed Solman's code?
Moreover, 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. Too bad! Too bad!
Let's see then the version optimized for mobile, and without parallax effect:
Indeed, this version is much more optimized for mobiles. However, there is no longer any parallax effect, too bad! This is precisely what made the site of this restaurant so particular... The site developers were therefore forced to create 2 versions of the site...
So you have understood: you no longer have to compromise! The parallax effect on mobile is well compatible with WordPress sites using the Divi !