I'm using Bootstrap 3 for my interface page on a site i manage. I set my full page background image using this CSS:

```
background-image:url('/path/to/image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

```

It works great... On desktop. On mobile, the image gets resized to to a very small resolution and it gets pushed up, above a bootstrap 3 panel. 

[Here is a picture](https://i.stack.imgur.com/8rFEA.png). On desktop, the picture covers the full page.  

And here is a [jsfiddle](https://jsfiddle.net/89cpmctt/4/). 

The thing is that it works great if i remove the bootstrap code; for example on another page not using bootstrap, the same CSS is used. The image scales nicely on desktop and on mobile.

What could be the problem?

Thanks