Background image for row not resizing for mobile

Hello,

The background image for my website is not resizing when viewed on my mobile or iPad.

Here is the link for the website.

www.camberleyyfc.co.uk

The image does resize when I use the mobile and tablet view on Customize, but this doesnt translate to when I actually look at the website page on my mobile. please can you help?

Many thanks

Hi there,

It is page builder functionality, and it is usual practice to set background image to cover container in order to have it covered all the time. If it isn’t set like that, image will resize on smaller screens, and because columns become taller, some portions of text (content) inside will be left without background. So, it is important to know that most of the time parts of the background won’t be visible. The actual visible portion will vary depending on screen orientation and width/height aspect ratio.
For instance, the common aspect ratio of portrait orientated tablets is 3:4 (iPad), and for desktop monitors it is 16:9 (full-HD resolution). In all instances the background is scaled to be as large as possible so that the container area is completely covered by the background image. In other words, some background clipping must occur, while the ‘content-safe’ area is the very center of each image – this area is always visible.

Keeping this safe area in mind, if you are using background as an important part of your visual message, make sure that its importnat part reside within that safe area so it won’t be clipped out.

All the Best!

Ok. So are you saying it’s best to have an image background on the widget, rather than the row?

Sorry I’m not very technical but how do I know the size of the safe area?

Many thanks

Please can you help? This is still an issue. How do I make the image not zoom in when on mobile or tablet?

It really doesnt look very good and I really thought this theme was meant to be responsive??? This really isn’t the case.

Many thanks

Hi again,

Theme is responsive, and explanation provided above should be sufficient for understanding that clipping of the background image will occur on different screen sizes, and this is according to css specification which is used for setting the image as background:

“cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area”

In same way all visual page builders are setting background image for row or container and this is the case even with premium ones like visual composer for example.

Best Regards!