SP Page Builder Row Background Image - Question | JoomShaper

SP Page Builder Row Background Image

This issue has been bugging me for some time now.! When I add a Row Background image it looks fine on the Mobile simulator but when I look at the page on my iPhone the image is just a 'fuzzy mess'. It seems that the background does not resize as it does on the mobile simulator.

Am I missing something fundamental here.?

Thanks

Joomla 4.4.12 Page Builder 5.5.2

0
5 Answers
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 7 months ago #187455

Hi there!

Thank you for bringing this to our attention, and I sincerely apologize for the inconvenience caused.

To assist you more effectively, may I kindly request temporary administrative access to your site? This will allow me to thoroughly investigate and resolve the issue for you.

Before sharing the credentials, I strongly recommend taking a complete backup of your site to ensure all data remains secure.

Looking forward to your response.

Best regards

0
john@webdesigndomain.com.au
[email protected]
Accepted Answer
7 months ago #187470

Thank you for your reply. Access is in Hidden content.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 7 months ago #187471

Hi John,

It's a very old issue of Safari (!) browser. (Sorry, Apple call it a feature, not a bug!). Also WP and Drupal users have the same. We informed about that even in SPPB 3.x (years ago), here is evidence

background-cover-fixed.png

The same info we have in SPPB 5.x under (?) , but who read it :/

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 7 months ago #187478

To solve it, you have to using extra CSS to force background-attachment: scroll; for that Row(s).

As you know you can create custom CSS class name and use it in each Row where you have that problem. Example CSS may look like that

@media only screen and (max-width: 780px) {
.iphone  {background-attachment: scroll !important;}
}

OR

@media only screen and (-webkit-device-pixel-ratio: 3) {
.iphone  {background-attachment: scroll !important;}
}

Then in Section Settings in CSS Class name put: iphone

0
john@webdesigndomain.com.au
[email protected]
Accepted Answer
7 months ago #187530

Many thanks. That has resolved the issue.

0