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.
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.
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.
