# Background not showing correctly on mobile devices

**URL:** <https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995>\
**Category:** RapidWeaver Classic\
**Created:** [December 10, 2018, 4:59pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995 "2018-12-10T16:59:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dylanmerte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dylanmerte/32/504_2.png) [@dylanmerte](https://forums.realmacsoftware.com/u/dylanmerte)\
**Post date:** [December 10, 2018, 4:59pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/1 "2018-12-10T16:59:54Z")

</div>

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)

 ![30%20AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/b/b0b3843121cec2394f22f16bc3b9f14cff470681.jpeg)

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

 ![IMG_0226](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/7/72d5f12da2ec375845ca00d3a344d205ebe068e0.jpeg)

Site where the problem is: [https://divinusdesigns.com/mainsite](https://divinusdesigns.com/mainsite)

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [December 10, 2018, 5:23pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/2 "2018-12-10T17:23:22Z")

</div>

> [@dylanmerte](#):
>
> background-attachment: fixed;

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.

> <https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios>

---

<div class="post-metadata">

**Author:** ![dylanmerte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dylanmerte/32/504_2.png) [@dylanmerte](https://forums.realmacsoftware.com/u/dylanmerte)\
**Post date:** [December 10, 2018, 5:34pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/3 "2018-12-10T17:34:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [December 10, 2018, 6:06pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/4 "2018-12-10T18:06:52Z")

</div>

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… 😉

---

<div class="post-metadata">

**Author:** ![dylanmerte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dylanmerte/32/504_2.png) [@dylanmerte](https://forums.realmacsoftware.com/u/dylanmerte)\
**Post date:** [December 10, 2018, 6:25pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/5 "2018-12-10T18:25:36Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [December 10, 2018, 6:30pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/6 "2018-12-10T18:30:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dylanmerte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dylanmerte/32/504_2.png) [@dylanmerte](https://forums.realmacsoftware.com/u/dylanmerte)\
**Post date:** [December 10, 2018, 6:37pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/7 "2018-12-10T18:37:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joeworkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/joeworkman/32/23780_2.png) [@joeworkman](https://forums.realmacsoftware.com/u/joeworkman)\
**Post date:** [December 10, 2018, 6:51pm UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/8 "2018-12-10T18:51:54Z")

</div>

> [@dylanmerte](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [January 10, 2019, 5:01am UTC](https://forums.realmacsoftware.com/t/background-not-showing-correctly-on-mobile-devices/23995/9 "2019-01-10T05:01:32Z")

</div>

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