Fixed backgrounds on iPhone and iPad...

User 148735 Photo


Registered User
97 posts

My website is working well on desktops, but fixed backgrounds do not work on iPhone or iPad. Online, there are long discussions about this problem. Any ideas on how to make this work in Site Designer?
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I made a building block for that at the time of RSD2.5. You find it on my sharing site, nearly at the bottom in the left-most column. Ideally it should have been converted to SD3.x, but you could download it and see if you are able to recreate it.

See my signature for the sharing site.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts
Online Now

Larry Holihan wrote:
My website is working well on desktops, but fixed backgrounds do not work on iPhone or iPad. Online, there are long discussions about this problem. Any ideas on how to make this work in Site Designer?


You have to remember that mobile devices don't like fixes background images it takes an awful lot of computing to do it and even though some of the new mobile devices have powerful computing capabilities there are still many around that cannot do it


Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2719045 Photo


Registered User
48 posts

Inger wrote:
I made a building block for that at the time of RSD2.5. You find it on my sharing site, nearly at the bottom in the left-most column. Ideally it should have been converted to SD3.x, but you could download it and see if you are able to recreate it.

See my signature for the sharing site.


Hi Inger

Having struggled with the issue with fixed backgrounds not working on i-Phones/i-Pads for a number of years. I have previously used the other suggested solution https://www.coffeecup.com/forums/respon … es/?page=1 but this no longer provides a satisfactory result as i-Pad screen resolution has increased so in landscape they are as wide in pixels as a computer monitor.

Your solution is much better but I can only get it to work if I limit the fixed scroll over element to one per page. I have some websites with multiple scroll over sections, each with its own image e.g. https://camillabrides.co.uk/.

Do you know of a work-round where the html element is restricted to a container, which also has the scroll over element, and not the whole website? I assume that as it has a negative Z value this is placing it behind all the other elements so this may not be possible.

I hopes this makes sense.

Thanking you in anticipation

Jeremy
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Hi Jeremy, it is a long time since I made that building block. I now had to dig out the old RFF to see properly what I did.
I think I understand your problem, and I will play with it a bit and see if it is possible to change it to make room for more fixed images on the same page. But I won't be using RFF for my experiments ;) , it will have to be SD.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Well, here is a 'first draft'. The images stay fixed on phones, but I haven't been able to make it any kind of pretty. There are too many gaps that need to be closed. Maybe someone else will be able to develop it further. I need to give up, at least for now, due to an eye infection that makes me sit here looking at it with just one eye.
Sorry about not being able to finish it.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts
Online Now

Inger wrote:
Well, here is a 'first draft'. The images stay fixed on phones, but I haven't been able to make it any kind of pretty. There are too many gaps that need to be closed. Maybe someone else will be able to develop it further. I need to give up, at least for now, due to an eye infection that makes me sit here looking at it with just one eye.
Sorry about not being able to finish it.


Here's hoping you make a 100% recovery soon
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2719045 Photo


Registered User
48 posts

Hi Inger

Thank you for your incredibly prompt response, I'll take a look at the file and let you know how I get on.

Hope your eye is getting better.

Regards

Jeremy
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Hi, my eye is back to normal, thanks. :)

I don't think what I created recently is the best solution for a fixed background. I'm working on a new approach now, so we'll see...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Hi Jeremy, I have tried several approaches and was about to give up. The stumbling block is that 'position fixed' for the images.
But today I found something at Codepen. I built it with the HTML Editor and it is working on my iPhone. I made a test upload here: https://pollen.coffeecup.com/parallax-test.html

I will try to get it transferred to SD-Foundation. Keep your fingers crossed!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.