I'm using bootstrap for my website and got localscroll to work properly (I use the standard nav bar code). So far so good.
Next I wanted to implement a fullscreen background that works properly on desktops and mobile (iphone, android, etc). Background picture should cover the whole screen and should not move when user scrolls content of a page. The only solution I could find (after quite a long search) was this:
html {
background: url('images/ny-building-xs-optimized.jpg') no-repeat center center fixed !important;
background-size: cover !important;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch; /* smooth scrolling on ios */
}
This works great!
Now if I combine this fullscreen background css with localscroll. Localscroll stops working. Which is strange because I read somewhere that in order to get localscroll to work you need to set a height and set overflow to scroll. Both are set.
If I remove the overflow: hidden css from the html tag than localscroll works but the background does not work correctly on my iphone (it scrolls and gets enlarged to the full size of the content - instead of the viewport).
Does anyone have a solution in which the background picture works and localscroll keeps working?
Thanks!
