Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Background Image not displaying on mobile

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:

enter image description here

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: enter image description here

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)

like image 307
SlightlyClever Avatar asked May 10 '14 21:05

SlightlyClever


People also ask

Why is my background image in CSS not showing up?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

Does fixed background work on mobile?

background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.

Can you use PNG in CSS?

The background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP) or gradient to the background of an element. There are two different types of images you can include with CSS: regular images and gradients.


2 Answers

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!

like image 96
Cody Reichert Avatar answered Oct 27 '22 02:10

Cody Reichert


This 2014 question is apparently still relevant in 2021. I just had an issue of a full page background image not loading on a OnePlus 5 when it loaded fine on every other device. Resized the image to 1400px width as per above comment from SlightlyClever, made that variant the one shown on mobile version, and it loads up fine. At the same time cut down the download from ~3MB to a bit under 1MB so that's nice too.

like image 3
Janne Enberg Avatar answered Oct 27 '22 04:10

Janne Enberg