Archived topic

Mobile - Desktop image modifier

7 replies · Started by MARIOS on September 21, 2021

Viewing posts 1–8 of 8

September 21, 2021 at 4:17 am #1937649

Hello everyone,

I am facing the following problems with my website:

1) When I try to add a background image to my website my site speed (Page Speed) is reducing dramatically (from 90 to 40). How can I solve this problem?

2) When I try to add a background image to my website the size of that image from desktop to mobile is changing insufficiently. How can I solve this problem?

The area that I want to change the background: Background image

My site URL is Dona Laser Beauty Centre

Thanks in advance!!!

September 21, 2021 at 7:04 am #1937809

Hi there,

can you attach the image to the background so i can take a closer look at what may be the problem.

September 21, 2021 at 8:59 am #1938153

Hi David,

Thank you for your reply!

You can check it now!!

September 21, 2021 at 9:15 am #1938174

I would suggest uploading a smaller image file - that original image is 2.5mb in size. You should be able to compress that to below 100kb. Ideally you would want it closer to 50-70kb.

September 21, 2021 at 10:35 am #1938246

David,

Thank you for your prompt reply.

Can you explain to me what can I do to have the same image for the desktop and mobile versions?

At the moment when I am switching to the mobile version, images are shrinking to an unnormal size.

Thank you in advance!

September 21, 2021 at 10:45 am #1938256

Hi Marios,

You can try using CSS to adjust the background image size and position:

@media (max-width: 768px)
    .gb-container-0d1eb9a3:before {
        background-size: 1386px;
        background-position: 75% 100%;
}

75% presents the position on x direction, 100% presents the y direction.

You can also adjust the background-size for mobile while it's set to coverfor desktop.

September 22, 2021 at 4:51 am #1938954

Hello,

I am trying to use CSS code but with no luck.

Can you explain to me how can I do that?

Thank you in advance!!!

September 22, 2021 at 7:54 am #1939339

Follow these steps:

1. Select the Container Block that has the Background image, in Sidebar > Advanced > Additional CSS Class(es) add: hero-container

2. In Customizer > Additional CSS add the following:

@media (max-width: 768px) {
    .gb-container.hero-container:before {
        background-position: 75% 100% !important;
    }
}

As Ying stated you will need to adjust the background-position percentages.

This archived topic is closed to new replies.

Start building better websites today.