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)
background-size
after setting the background image, also, use vendor prefixes, so-webkit-background-size
,-moz-background-size
.