[Resolved] background image issue (again)

[dasigna]

i know that this is no new issue at all, but i cant getting it solved properly up to now:
i’ve set a global bg image to body in GP. full width (cover) and fixed.
so this works great on desktop and mostly all mobile devices and browsers (some exeptions) but not at all on ios-devices, mainly ipad.

the strange thing is that the image is there, but doesnt seem to follow the viewport (as intended) but the whole size of the page or content (experiencing this when page content amount is quite different).
tried a few ‘solutions’ already that can be found out there on the web, but none seems to work without issues, and ios devices seem to be quite hard to trick out – but there are lots of out there, so they should be paid attention to as well…

so whats really the best way to solve this, and force the bg to follow all viewports???

[Tom]

I believe setting it to “Fixed” forces it to stick to the viewport as the image doesn’t scroll.

It looks like iOS has trouble with fixed attachments: http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

[dasigna]

yep. ‘fixed’ should force the bg to stick to the viewport. but thats not the case on ios.

ios seems to have ‘trouble’ with fixed for a long time – looks even more like this is not supported or supressed.
and it seems its hard to deal with.
what i am looking for is a way to deal with, with pure css! eighter could change the attachment to ‘scroll’ for ios, or much better implement something that forces ios to show the fixed.
and the question for me was, what might be the right way for GP or if you might have an idea or solution, because so far nothing really worked well …

???

[Sebastian]

Hi dasigna,

try the plugin https://wordpress.org/plugins/easy-backstretch/. You can use this plugin with one image or more. This plugin is not the best solution, because it doesn’t take or save images in the media library, but it works.

I had to struggle with the same problem. For me, the plugin solves the problem.

You can also try this manual solution (jQuery plugin):
http://srobbin.com/jquery-plugins/backstretch/

I hope, that helps.

Sebastian

[dasigna]

@sebastian thanks.
the plugin seems to be a little outdated… but will see if i try the manual one.

got it solved for elementor-sections with full-width-bg by setting an @media-rule for mobile devices by forcing the background-attachment to scroll. (can live with this for the moment until finding a better solution).
but think that this only works because they are set within divs… so that doesnt do the trick for gp-body-background so far.

would still prefer a simple css workaround … 🙂

[Tom]

I’m not sure a simple CSS workaround exists, but I’ll definitely keep an eye out for it 🙂

[dasigna]

… issue solved – no! 🙁

@sebastian: can you show me a site where this works on ios-devices?????????
tried the backstretch thing… it sets the image right according to viewport, but the again its scrolling with content, and rest of page leaving blank bg.
so thats no solution anyway.

@tom: is there a way to put it as bg into div that covers the whole body? cant get that to work …

damn apples!

[Sebastian]

Here I use the plugin: http://bode.codable.de/

If you scroll, the image jerks a bit up and down. But if you stop scrolling, it fits again.

As I said, it is not an optimal solution, but I can/have to live with that, for now.

Here is another plugin from Pippin Williamson: https://wordpress.org/plugins/simple-full-screen-background-image/

[dasigna]

o.k. tested both again:
easy backstretch works now (dont know why not before…) with same ‘issue’ as on your site; the little flip up and down when rescaling/recovering bg.
simple full screen also works, again with little flip, but smoother. only disadvantage: it squeezes the image on portrait mode.
so stay to the first by now. better than every attempt before!

grüsse nach magdeburg und danke nochmals! but lets stay to the language of the forum we’re in, so big thanks again 🙂

[Sebastian]

Danke und gerne. 😉

[Author]

Posts