title: CSS Background Image not displaying on mobile
body: <p>i've added background images using CSS on the banner section of a few pages on a Wordpress site and they <strong>work fine on desktop on Chrome/Safari/IE/Firefox using auto-prefixer</strong>. For some reason on mobile browsers <em>(I've tested on Chrome and Safari on my iPhone)</em>, <em>some</em> of the banner images display correctly while the others do not.</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/nBEZR.jpg" alt="enter image description here"></p>
  
  <p><strong>UPDATE:</strong>
  After some advice from the guys, I tried to resize some of the images to see if they worked on Chrome/Safari on Mobile:
  <img src="https://i.stack.imgur.com/YfaX6.png" alt="enter image description here"></p>
  
  <p>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)</p>