Background not showing correctly on mobile devices

I’ve set the following code under the css section to change my background and I see it looking fine in RW preview and simulator but it does not show correctly on a mobile device.

body {
background: linear-gradient(#3C94CB,#A2BECF,#F5A581,#FC8380);
background-repeat: no-repeat;
background-attachment: fixed;

The issue is that the background shows blue to red in RW but on mobile the red in the background does not go to the bottom of the browser window.

How can I fix this? And i’m Not wanting to buy a stack or plugin, i’m wanting to just fix this by a probably a simple code adjustment.

View for RW. (Where it looks fine)

View on an iPhone 8 (Where you can see the background just continues to the bottom of the page and not browser window)

Site where the problem is:

I think this is the issue.
This is also called parallax and I don’t believe is supported by iOS, Unfortunately,I Don’t know of an easy workaround.

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

Well removing that line of code there is no difference on mobile, and on a desktop view it just results in the same issue now that I see from the mobile view. So if I have (background-attachment: fixed;) in there it shows better on desktop.

Fixed backgrounds and parallax are two different things. However, @teefers is correct in that fixed backgrounds do not work on iOS. There is no way to do that without some complex work arounds.

This is a good use case that shows you how the RW8 simulator is not perfect (not its fault). There is no substitute for viewing on an actual device.

Welcome to coding for the web… :wink:

Ok, so @joeworkman if I were to get your Eclipse or Wallpapers stack would that let it show in a fixed view on mobile? And does Eclipse or Wallpapers let you set at least 4 different points for a gradient background?

Wallpaper does not have any work arounds for fixed backgrounds on mobile right now. Eclipse does work for fixed background images though.

One potential workaround if you want to use Wallpaper, set it to be 100% variable height. This will make it fixed height of the browser. The content could then scroll within Wallpaper. This is not exact but its pretty close and may work for you.

ok, and so does Wallpapers let you set at least 4 different points for a gradient background?

Watch the video on Wallpaper. It has tons of built-in gradients. You can also supply your own custom CSS.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.