Why is the background 2x bigger on mobile?

Question

css

Just an example
This is on a computer in safari

This is on a computer in safari as a device (iphone 5 / SE):

And here is the problem, when I open it on an iPhone (5), the background increases in size:

Here is the code:

.indexBanner {
    padding: 30px;
    background: grey url("~assets/images/hello/burger.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    background-blend-mode: multiply;
  }

Answer 1

Do it like this:

.indexBanner {
    padding: 30px;
    background: grey url("~assets/images/hello/burger.jpg") no-repeat fixed;
    background-size: cover;
    -webkit-background-size: cover;
    background-blend-mode: multiply;
}