Fixed background section not working on mobile devices

EIF

I have add / changed the background of Section-3 of the JA resort template and set some settings, as you can see on the screenshot.

When I scroll on the website, the background is fixed. So when scrolling a (transparant?) div is showing the background when scrolling and then disappers when another div, another section is shown. That works perfect.

But on mobile devices it doesn't work. The background is static and looks like very zoomed in. What is wrong in the (css?) code?

Ninja

EIF
Hi
Can you share the URL of the site so i can have a look on it? the image is used as background so it will complete space, in mobile it will use the same method to make the size as cover that i can see in your settings.

EIF

Hi,

The website is still in development, but I just published the work in progress on a temp url: https://kattenzorg.sankalhosting.nl/

If you scroll down you see the background image. It works in desktop mode well, alsof when hitting F12 and simulate a mobile devices. But on a real mobile device the background image doesn't work the same. Also zoomed in too much.

Ninja

EIF
Hi
the background size you set is cover http://prntscr.com/rl84bg
so image will be used as cover to fill complete background in all devices.
I also checked it my mobile device chrome browser and background is fixed.

EIF

Hmm, ok, but on a desktop you see the image fixed on the background. When scrolling the image stays there and the text is scrolling over in.

But on my phone, the background scrolls with the text, instead the text over the background.

Also, 'cover' indeed should fill the complete background. But only the background for that particullary div. It looks like it fills the complete background of the whole website, including all other divs. It should resized to the size of the div where this image is a background image of.

Ninja

EIF
Hi
I tested it on my mobile device can not see any issue in my chrome. Maybe it's related to your mobile browser not support fixed style. Kindly check it in latest Google Chrome in phone.

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.