CSS Background Image not displaying on mobile

Question

i've added background images using CSS on the banner section of a few pages on a Wordpress site and they work fine on desktop on Chrome/Safari/IE/Firefox using auto-prefixer. For some reason on mobile browsers (I've tested on Chrome and Safari on my iPhone), some of the banner images display correctly while the others do not.

.banner {
position: relative;
overflow: hidden;
background: -webkit-linear-gradient(bottom left, rgba(37, 17, 36, 0.45), rgba(37, 17, 36, 0.45)), url(img/banners/home.jpg);
background: linear-gradient(bottom left, rgba(37,17,36,0.45),rgba(37,17,36,0.45)),url(img/banners/home.jpg);
background-size: cover;
text-align: center;
background-position: center center;
}

The image on the left is of a page which displays the background image correctly and the image on the right is of a page which does not. Both have exactly the same css apart from the image used:

UPDATE: After some advice from the guys, I tried to resize some of the images to see if they worked on Chrome/Safari on Mobile:

As you can see the resized images did work on both Chrome and Safari on my iPhone. Apple's IOS documentation recommend a maximum size of 1024px but 1400px worked fine for me (although I did have to delete cookies and data in Safari settings on my phone)

Answer 1

So, what are some other differences between those two images? Mostly pertaining to pixel size.

Mobile Safari has a pixel threshold, which actually has nothing to do with size in kb of the image, but the amount of pixels. What are the sizes of the images that aren't displaying? Are they longer or taller than the ones that are?

Here is a link to the Safari Web Content Guide. Scroll down to the Known iOS Resource limits and see if you fall under any of those categories!