7

I'm developing a cordova app and I'm trying to get a fixed background. Unfortunately, it doesn't seem to be working, and anytime I scroll down the background simply goes off the top of the page. Here's the CSS I'm using to do this (and I've tried it several other ways):

html {
    width:100%;
    height: 100%;
    background-color:#000000;
    background-image:url('../img/bg_reader.jpg');
    /*background-repeat:no-repeat;
    background-attachment: fixed;
    background-position: center;*/
    background-size: 100% 100%;
}

No matter what, the background scrolls off the top of the screen when I scroll down as if the fixed property weren't set.

Nathan
  • 390
  • 1
  • 2
  • 10

1 Answers1

18

Have you tried this?


    html, body {
        height: 100%;
    }
    html {
        overflow-y: hidden;
    }
    body {
        overflow-y: scroll;
        background-color:#000000;
        background-image:url('../img/bg_reader.jpg');
    }
szmegma
  • 259
  • 4
  • 9
  • nice. it adds a scrollbar when not needed (maybe just in my case, not sure), but other than that works. I've added `background-size: cover;` to account for very large and portrait screens. – jozxyqk Oct 28 '13 at 12:49
  • 1
    Dude, I did NOT think I would find a fix for this issue; thanks many. – B Rad C Aug 26 '14 at 03:41
  • Nice fix but the visible scroll bar at all times is a deal breaker for me. – benallansmith Sep 14 '14 at 11:20
  • 1
    Be aware, that this solution will remove auto focus from page, which means you have to click the page before you can use mousewheel or keyboard buttons to scroll the page. – ruuter Apr 21 '15 at 16:31