CSS Background Image not displaying on mobile
SlightlyClever
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)
Cody Reichert
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!
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Visual Studio Extension (VSPackage) runs in all Experimental Instances, but does not run after being installed as a .vsix, except in VS2010
- Next: Set a Google Analytics goal based on events from 2 domains
Related
Related Related
- 1
Background image not displaying on mobile devices
- 2
background image not displaying css/html
- 3
CSS: div with background image not displaying
- 4
CSS Background Image Distorted on Mobile
- 5
Background-Image not displaying correct image for mobile Media Query for newsletter
- 6
Local CSS background-image not displaying
- 7
Displaying an image as a background of a html form using CSS
- 8
CSS - Issue with stretched background image (Samsung Mobile)
- 9
css issue with background image on mobile browser
- 10
Multiple CSS background-image's on Mobile
- 11
visualforce background image not displaying
- 12
Body background image not displaying
- 13
background image not displaying correctly
- 14
Body background image not displaying
- 15
Background Image is not displaying in Div
- 16
Background Image not Displaying in Chrome
- 17
CSS - displaying a dynamic height floated DIV - missing background image
- 18
background-image in HTML, CSS and JavaScript game not displaying
- 19
Firefox Add-On CSS not displaying background-image
- 20
Displaying a background image on webpage behind existing content with CSS
- 21
CSS Background Image Not Displaying ( using HTML5 Boilerplate)
- 22
(CSS)Trouble having background image resize for mobile device
- 23
CSS Desktop vs Mobile keeping the background image visible
- 24
Background image in mobile is lost
- 25
Background image size is not displaying on firefox
- 26
Displaying a png image without the background
- 27
Background image not displaying for email in html
- 28
background-image not displaying on ios
- 29
Local background image not displaying in html
Comments