1

So, I'm trying to get a background-image to work on any device, where it covers the body and stays in the same place no matter where you scroll. Setting background-attachment: fixed; works great for most devices, except for Android 2.X. Now, what I am trying is to have a separate div that fills up the screen with the background image.

I got this idea from This answer. Works perfectly! Except, on occasion, whenever the screen size changes or the content changes, the background becomes white all of a sudden. This happens sporadically and I cannot find a cause for it.

Here's my css for the background:

#background{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url('../Images/About/about_background@2x.png');
    background-size: cover;
    background-position: top center;
    background-origin: padding-box;
    background-attachment: fixed;
}

Here's the HTML:

<body ng-controller="MainCtrl">
    <div id="background"></div>

    <div id="wrapper"  class="">
        <div id="scroller" >
            <div class="container" style="" ng-view ng-class="slide">
            </div>
        </div>
    </div>
</body>

I have noticed that inspecting the element in developer tools and removing ".container" will remove the white background and the "real" background will show again.

Does anybody have an idea as to why this would happen? Or, if there is a better way to obtain a fixed position background image, please let me know! Thanks in advance!

Community
  • 1
  • 1
KJ Price
  • 5,774
  • 3
  • 21
  • 34

1 Answers1

0

on the body Can you try with this solution if you like:

background: url(img/aurora.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
Emanuele Parisio
  • 1,192
  • 8
  • 27