Canvas Support

different home picture with phones and tablets

2 replies · opened Mar 13, 2023

AAlexiMar 13, 2023

Hello,

Is there away to load a different index.html background image with mobile phones vs computer screens?

We are using the index template and like to have different image load when users using phone or tablet.

Thank you
Alexi

SSemicolon WebSTAFFMar 14, 2023

Hello,

Currently, the Background Image is resized according to the size of the available area for the best fit. You may consider using a different image for responsive devices based on your Image requirements as it may work best in this case. Example:

[ch_pre type="css"].device-xxl .background-image-class { background-image: url('image.jpg') !important; }

.device-xl .background-image-class { background-image: url('image.jpg') !important; }

.device-lg .background-image-class { background-image: url('image.jpg') !important; }

.device-md .background-image-class { background-image: url('image.jpg') !important; }

.device-sm .background-image-class { background-image: url('image.jpg') !important; }

.device-xs .background-image-class { background-image: url('image.jpg') !important; }[/ch_pre]

The Responsive Classes are as follows:

.device-xxl – Class for Larger Devices >=1400px

.device-xl – Class for Large Devices >=1200px to 1399px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AAlexiMar 16, 2023

Thank you for your respond. I'll try it.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard