html - background-size causing background to disappear on mobile

Question

I'm running into a strange issue where declaring the background-size to be a certain px value makes my background disappear entirely on mobile (Specifically on the pixel 2 xl, have tried it on a pixel 2 and it works).

Below is the code I am using to declare my background

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) repeat center center;
  background-size: 550px 350px;
  -webkit-background-size: 550px 350px;;
  -moz-background-size: 550px 350px;;
  -o-background-size: 550px 350px;;
  background-size: 550px 350px;;
}

If I switch background-size to cover it correctly works, however, I want the background to be repeated so having one picture cover the entire page does not really work here.

Answer 1

I ended up downscaling the picture to 550 x 350, not the optimal solution but it worked for me