Ever created a background for a website that is sheer perfection only to have it that when you go and show it to someone on your mobile phone – you only see a section of it which basically ruins the whole experience? I have been there too. Which is why I want to give you 2 ways to make your Divi backgrounds mobile friendly.
Divi Background on Mobile Issue
Before we jump into the solutions, let’s just have a look at what the actual issue is.
Let’s have a look of an example of this. Say we have a landscape background image of a family.
Looks great right?
Now we switch over to the mobile view and what do we see…
Now unless the kids were always your focal point, the family dynamic is missing here now as it is cropping the parents out of the background.
Solution to make your Divi Backgrounds Mobile Friendly
So how can we fix this? Well, as I said earlier, I have two options for you.
Use a Colour Background
Using a colour background will do away with all the issues as there is no specific focal point on the background so when viewed on any device it will look great!
Use Different Images for Different Devices
This is probably the best way to do it with Divi in it’s current form. Create two separate images; one for landscape (to show on desktop) and one for portrait (to show on mobile) and then use the Divi Background settings to set each background.
If you click on the section module and head to the setting click on Background and then click on the mobile icon.
Now you should see the three responsive options; desktop, tablet and mobile.
Click on the image tab and then click add image. If you select the landscape image for the desktop and portrait image for mobile, it should display as you have created it.