Fixed background NOT fixed on touch devices

General questions pertaining to how certain issues can be resolved. This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.
Forum rules
This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.

1. No offensive language and no mocking
2. Please do a thorough search before you post something. Trust us, there is a high probability that the question you are asking has been asked previously.
3. No soliciting. You cannot post here soliciting bids for people offer you quotes, or even offer money to people for some work. You will be moderated if you do so. If you are looking for help, please post your request on http://jobs.wordpress.net or http://codepoet.com
4. Please be reasonable. You are getting software and support. For free. Complicated requests from a general purpose theme are not welcome and some volunteers might lose patience with you.
5. Please do your due diligence. If you posted a query and we answered with a link, take the trouble to go through the link contents.
6. Please post with complete information. Requests for help MUST be accompanied with your URL, particularly if you are asking something like "Why am I seeing a blank space?"
Locked
WimScholtes
Posts: 51
Joined: 28 Oct 2009, 14:23

Fixed background NOT fixed on touch devices

Post by WimScholtes » 07 Jan 2012, 06:42

Hi,

I'm using a fixed background for the body of my blog and that is working fine on a normal device like a PC but not on a mobile device that's working with a touch interface like an iPad or iPhone. I have searched the web en read that it is a known problem. It's not a real error because it has to do with the differences in behavior of the browsers on a 'old' non-touch device and a new mobile (nowadays mostly) touch device.

If that's the matter than I want a different background on touch and on a non-touch device (I could also make one background that looks fine when fixed and fine when scrolled but that's not what I want). Does someone know what code to add to the Suffusion template to make the difference? Hopefully some nice CSS code to include in the custom code section? Has somebody encountered this problem already and can reply with an easy ;) solution to fix this?

Greetings...
Wim

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: Fixed background NOT fixed on touch devices

Post by Colin » 07 Jan 2012, 06:49

URL? (Forum rule #6) Then we can see what you are seeing and maybe offer some suggestions.

WimScholtes
Posts: 51
Joined: 28 Oct 2009, 14:23

Re: Fixed background NOT fixed on touch devices

Post by WimScholtes » 07 Jan 2012, 07:01

Sorry, here it is: http://www.ischoltes.nl

Greetings...
Wim

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: Fixed background NOT fixed on touch devices

Post by Colin » 07 Jan 2012, 09:42

Wim

I have checked it out on my iPad with both the Apollo browser as well as Safari. It seems to me that these mobile browsers are doing exactly what you have asked in that you have set your background to repeat according to the CSS.

What you need to do, I suspect, is set no-repeat for the background. This will just put one instance of the background at the top of the page and they may then respect your fixed tag in the CSS. Or, alternatively this may just be a quirk of mobile browsers and that they don't respect fixed backgrounds.

Give it a try and let us know how you get on.

WimScholtes
Posts: 51
Joined: 28 Oct 2009, 14:23

Re: Fixed background NOT fixed on touch devices

Post by WimScholtes » 07 Jan 2012, 10:02

Colin,

Unfortunately that doesn't help ;). When I set the background to norepeat (in the Suffusion options) en keep the scroll/fixed option to fixed background image (as it already was) then on the iPad the background image will be shown once and when you scroll down (or is that up?) you see only white. That white is probably the background color set somewhere in the WordPress options or the Suffusion option (not being the same as the background image).

I keep the settings on noscroll and fixed so that you can see for yourself what happens now (if you have a touch device).

Greetings...
Wim

Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: Fixed background NOT fixed on touch devices

Post by Colin » 07 Jan 2012, 10:46

Wim,

This seems to be a failing of the mobile browsers not being fully CSS compliant.

You could leave it like this and set the background to a pale green so that where there is no image it just looks like more grass. Alternatively select an image that can be repeated that looks good on mobile devices.

Sorry I have no more ideas at the moment.

sayontan
Site Admin
Posts: 10210
Joined: 15 Sep 2009, 16:39
Location: Houston, Texas
Contact:

Re: Fixed background NOT fixed on touch devices

Post by sayontan » 07 Jan 2012, 19:36

This is actually a quirk of mobile browsers. Basically the "background-attachment: fixed" declaration doesn't give the results you want, because the background is fixed w.r.t. the window and the window itself moves (the address bar also scrolls, if you see what I mean). You could argue this is a bug in iPhone: http://www.quirksmode.org/css/backgroundattachment.html.

WimScholtes
Posts: 51
Joined: 28 Oct 2009, 14:23

Re: Fixed background NOT fixed on touch devices

Post by WimScholtes » 22 Dec 2012, 10:05

Yesterday when I had some time to kill, I searched the net and found a very tiny plugin called "full screen background" that fixed my problem. With this plugin installed the background will behave pretty neat on the iMac, iPad and iPhone. It's so tiny that it doesn't have an user interface so you have to edit the php file to set the image you want to show as background but that is not really a problem. Although, it would be nice if Sayontan just built this feature into the Suffusion theme :D ;) .

Greetings...
Wim

Locked