Background Image Issue in mobile view

Hello,

I am having issues with my background images in the mobile view. In the desktop the image works great! See below:

However in the mobile view, it cuts off the left and right sides of the picture and only shows the middle!
This picture if from the homepage. It is also happening on the services page (see below) for the large picture at the top.

Any help would be greatly appreciated because this is happening on several pages!

Thank you!!

Hi,

That is normal, background images will always cover the section’s background, so the images will cut accordingly to fill the background of the section, if you want to show the full image as background you can set your background images to contain, that will always show the full image, but the background of the sections will be filled with blank space, so how it is the now is the correct way of having background images.

Kind Regards,
Csaba

Hi,

Thank you for the response. How would I go about making the mobile version look like the desktop version (meaning that the image is not cut off on the sides)? On the “Home” and “Services” pages I would like these large images to be scaled down in the mobile view.

Thank you!

Hi,

You can scale down only images you will add as content images, background images, you can’t scale down, only by making the section itself ( by adding padding or content to it ) smaller or larger ( by adding or removing padding or content on it ) depending how you would like to scale the image.

Kind Regards,
Csaba

Hi Csaba,

Is it possible to hide the images in the mobile view? And possibly just have a colored background in mobile version?

Here are screenshots of the two pages again. The first is the homepage:

The second is on the “Services” page:

Thank you!

Hi,

Yes, it’s possible, you can replace the background image with a color on mobile devices with this Custom CSS:

@media only screen and (max-width: 768px) {
.panel-row-style-for-4-3 {
    background: red !important;
}
}
  • this will work for the section from your screenshot

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hi Csaba,

It has worked great for the Homepage image! Thank you!

Are you able to offer code to fix the services page image?

Thank you!

Hi Csaba,

Any thoughts on how to make the same changes to the background image on the “services” page? Thank you! :slight_smile:

Hi,

You can do the same with the Services page background with this Custom CSS:

@media only screen and (max-width: 768px) {
.panel-row-style-for-191-0 {
    background: red !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba