How to create Responsive backgrounds with Elementor

Smartphones account for 70-100% of your site’s traffic. And so, responsiveness is a basic requirement. With so many different devices, resolutions, and aspect ratios, creating responsive backgrounds that look good on all platforms can be tricky. However, Elementor makes the task easy. Let’s explore how!

Try Cloudways Hosting for free!!

I will use the below image for this demo

Originally, this image is 1920X1080px. We have to accept that this image will not look the same across all screens. May be on a full HD PC monitor, it will render in its original form.

On devices like laptops that have a wider aspect ratio, there will be cropping at the top or bottom or both depending upon how we crop it.

On the other hand, on devices with taller aspect ratios like smartphones, there will be cropping on the sides. Left, right or both.

To illustrate this, let’s look at the Navigation Pro theme by StudioPress.

On the desktop, there is no sky visible in the hero image. However, there are ridges at either sides of the image:

Here’s a side by side comparison:

This approach of cropping is the most acceptable way of creating responsive images, and this is the approach I will use for this demo.

let’s start with the PC version. Let’s add a section with the preferred image as the background. This image should be displayed full even when the section is empty. To do that, let’s set the minimum height to 90% of the Viewport height. It is very important to remember to never use pixels value when dealing with responsiveness. With this 90% setting, this is what we get:

 

Try Cloudways Hosting for free!!

Now, let’s select Mobile from the responsive mode:

For the smartphone screens, there will be cropping at the sides. So let’s set the minimum height to 100%. And let’s adjust the Z-position so that there’s almost equal cropping on both the left and the right sides :

 

 Now, we repeat the same process for tablets:
 
This is how we create Responsive backgrounds in Elementor. Please share your thoughts!

Leave a Reply