Fixed background section not working on mobile devices

EIF

I use an iphone (and ipad), I tried 3 browsers, safari, chrome and firefox. On my phone and tablet the background doesn;t work. On my pc it does.

I made a screenshot of my phone. As you can see the background is visible, but very zoomed in. As it a background of the total website, instead of 1 div. Also the background scrolls with text, instead the text scrolling over the image.

Ninja

EIF
Hi
The background is zoom because its set as cover, a cover image will fill the background of the container, in phone the text height is long so its like this, its not something that is bug, background image work like this
if you set background to 100% it will not fill complete space.
Hope its clear now.

EIF

ok, but still it covers more than the background space of the div.
And also the background scrolls with, with the text. The background should be sticked, where the text is scrolling over the image, just like on a desktop.

So there should be other css code for mobile use. The row options overlay settings doesn't provide this.

Ninja

EIF
Hi
No its used same setting for both, on pc there is large width so the image is resize correctly in width and height.
In phone width decrease but height increase as text is more. its not about style tweak its based on the text. if there is less text you will see it will better.

Let me know if still there is any confusion.

EIF

I understand what you mean, but if it reacts the same, the at the beginning of the text, the top of the background image should be visible. And at the bottom of the text, the bottom of the image should me visible. That is not.

And also, the background image should be fixed, so the text is scrolling above the image. Now the image itself scrolls with text.

Ninja

EIF
Hi I already explained above the image. I attached the screenshot from mobile to show this working. Might be your mobile device browser not support fixed style.

EIF

thank you for the screenshot. That looks how it supposed to be.

Strange that it isn't working on my devices. Maybe it's an apple / IOS issue, because all browsers I try doesn't work.
Do you use android maybe? Or should be there some additional css code the get this working on apples?

Ninja

EIF
Hi
The style is same for all browser, it might be the specific phone browser only not supporting this, otherwise your site has no such issue found.

EIF

Hmm, I think it is an apple or IOS issue, because on my Ipad Pro it acts the same, (see screenshot)

Ninja

Hi
Are you getting same on demo site? Please make a screencast and share it .
Tell the iOS version browser name and version. I will share it to dev team for further check as I have the Windows PC and Android phone not able to check it further.

EIF

On the demo site this kind of background isn't being used, so I can't check it. But it is an standard option / setting.
I hope the dev team can figure it out. All versions are the latest, most up tot date available versions.

Ninja

EIF
Hi
Add this code in custom.css file

@media (max-width: 1199px) {
	#t4-section-3 .bg-overlay-image {
		background-attachment: scroll!important;
	}
}

EIF

Hi,

I am afraid that isn't the solution. The background should be fixed.

I did some online research and it is really a iphone/ipad render issue. I found a script that should detect if it is a ipad, but I can't get this work. Tried to add the script after the <head> as the template allows me to, but I think the issue is to get the css pick it up correctly.

Maybe your dev team could check this site and implement this (or some own version of it) in the JoomlArt templates, or at least in the JA resort template. It is a known general iphone/ipad issue, where a workaround needs to be fixed. https://www.sitepoint.com/community/t/fixed-background-on-ipad/203905/6

Ninja

Hi the solution given above is by dev team. And this fix will be added in next version. You should apply the fix first and check.
Hope it make sense.