Site logo

Archived topic

How to create a responsive background?

3 replies · Started by jerry on January 10, 2023

Viewing posts 1–4 of 4

How do I create a responsive background? Like a full-size image in a container,automatically match sizes for different devices.
The background image is displayed by padding pixels, so the image size on the mobile is not correct, and the size of the image in the container decreases with the size of the mobile.

Hi there,

does the Container fill the width of the browser ?
If so:

1. calculate the Aspect Ratio of your background image.
1.1 get the original images width and height
1.2 Aspect Ratio % = height / width * 100
eg. 800px width / 1200px height * 100 = 66.

2. Select the Container Block and set its Minimum Height ( based on example ) to 66 VW - note the VW units must be selected.

hi,David,thank your for your help

You're welcome

This archived topic is closed to new replies.