[Support request] background images are not responsive in every case

[Vajramati]

Hi, I’m having a problem with my site. The background images are not responsive in every case?
I’m using Gutenberg Editor and GenerateBlocks.

Desktop no problem
iPad not resizing landscape or portrait (size seems the size of a desktop image so only a small part shows)
iPhone resizing in portrait not resizing in landscape (size seems the size of a desktop image so only a small part shows)
Can you help?
Peter

Block

Container
Container Full Width

Backgrounds
Cover
Center center
no Repeat Fixed

[David]

Hi there,

The Background size cover will resize the image based on the size and shape if its parent container. Which can cause headaches if you need to to keep certain parts of the image always in view.
The GenerateBlocks Pro plugin provides an Advanced Background option, which allows you to change background images and there settings for difference device sizes.

But if you want to share a link to a page where i can see the issue?

[Vajramati]

The site is still under construction.
https://gothamcitykitties.org/file-2/
The bottom parallax is the image with the problem.

from the last email
Desktop no problem
iPad not resizing landscape or portrait
iPhone resizing in portrait not landscape
Can you help?
Peter

Block

Container
Container Full Width

Backgrounds
Cover
Center center
no Repeat Fixed

[David]

Aah thats because mobile devices don’t support fixed backgrounds ( they consume a lot of CPU Power ) and iOS has a bug that rescales the images badly. To stop that from happening add this CSS:

@media (pointer: coarse) {
    .gb-container,
    .gb-container:before {
        background-attachment: initial !important;
    }
}

This will disable the fixed background property on touch enabled devices.

[Isrrael]

Dear David,

I hope you are well. I got a similar problem, so the difference is that I do not use fixed backgrounds, in my case I am using the background image for a parent container.

Here you can see image in the demo website which is the hero after header.

https://1.hostinge4.com/quienes-somos

PD: I’ve got generatepress pro and generateblock pro.

Thank you for you help.

[David]

Hi there,

what are you wanting to change ? Is it to show more of the image on smaller screens ?

[Isrrael]

David,

Hi, I want to see the image responsive when we are using the background image for a parent container, so now we can use it but the image is not responsive at all.

Regards

[David]

You need to adjust the Top and Bottom Padding of the Container Block, and if necessary the font size of the Headline block for Mobile and Tablet.

If you select the Container Block or Headline Block, above the settings you will see Desktop / Tablet and Mobile tabs. Change to the Mobile view, and adjust the Padding Top and Bottom ( eg. make it smaller ) or Typography font size.

By reducing the padding and font size you will maintain the Aspect ratio of the Container so it matches closer to Desktop.

[Author]

Posts