Background images not scaling down on mobile view (iPhone)

Hello
I built up the website www.greenexenergy.com using the Sydney Theme.
Therefore, I used the ‘Page Builder’ plugin to set up the content. Between each ‘block of content’ I inserted a row containing a ‘background image’ (background image of the row).

Everything is working fine on desktop and bigger screens, as I adapted the image sizes for them.

Problem:
However, on mobile screen (iPhone 5 etc), only a very small extract of the original picture is shown, meaning some big pixels, not representing the image at all. It does not scale down the image at all.

The Solution I seek:
I’d like to have displayed a big part of the picture on mobile screen, or even the whole image (like for instance it is displaying the header-slider-images on the movile version).

I guess I’ll have to add some CSS to my child theme? What would it be?
Thank you in advance for your precious help!
andivio

ps: there have been some other similar topics in here, however, all of them focusing on the header-slider-picture…

Hi,

You might be seeing cache. I suggest you clear the cache from your mobile browser.
I just checked your site both on a physical iphone and on our testing tool and the image doesn’t look pixelated.

Hello there,

Sorry to interrupt. Perhaps I have other solution to try.

Full width parallaxed background image is really problematic on smaller device when the image acts an important content for your site’s visitors to see. To make it automatically scales down is a hard task. Please review this discussion, which will give you a little insight on how trick in on smaller screen.

To apply the same CSS code, the first thing to do is find out the ID name of the background image row. You can use the web browser’s inspector tool to find it. On Firefox, right click > Inspect Element.

Cloudup

For example, you’d use the following CSS code to alter this row’s, which its ID is pg-8-1.

Cloudup


@media only screen and (max-width:767px){
  #pg-8-1 .panel-row-style{
    background-image: url("http://www.greenexenergy.com/wp-content/uploads/2017/01/image1-mobile.jpg") !important;
  }
}

Add the code above into your child theme’s style.css to apply it on your site.

I hope this reply helps.

Regards,
Kharis