background-image won't show on phone browser

Question

I have the following CSS in order to get an image on my page background, and a color around it.

#home{text-align:center;background:Red url('/Content/image.png') no-repeat fixed center;}

When I run it on my computer with any browser (I prefer Chrome), everything is fine. However, when I open the website on my phone (also using Chrome), I only see the background color, not the image. However, as soon as I remove the center part (background position), I can see it.

Any idea?

I've done them all separately (background-color, background-image, background-repeat...) and same result. — user304429, Feb 23 '13 at 19:56
What model of the phone? And did you try to use relative paths? — el Dude, Feb 23 '13 at 21:33
iPhone 4S. As I've said in my OP, it does show when I don't use the center property so path isn't an issue here. — user304429, Feb 24 '13 at 14:18
I hope, here is the answer http://stackoverflow.com/questions/3183467/css-background-position-not-working-in-mobile-safari-iphone-ipad — el Dude, Feb 24 '13 at 15:05

score 3 · Answer 1 · answered Sep 04 '13 at 17:07

3

After some searching, I found that images wider than 1024px don't display on iDevices. I used a media query to change the background, like this:

@media all and (max-width:900px), (max-device-width:900px){
body{
background-image: url('smaller-image.gif');
}
}

Hope that helps someone.

answered Sep 04 '13 at 17:07

Julian K

1,877
2
19
27

I've been messing around with my CSS for hours now trying to get a background image to display on iOS7 or older devices with no luck. I changed my image to 1024px in width (from 3000px) and now it works. Thank you so much! – GuerillaRadio Sep 30 '15 at 10:34

score 1 · Answer 2 · edited Feb 09 '16 at 15:01

1

I faced a same problem, then I applied background:url("../img/pic1.jpg") no-repeat center; its working you can try if you faced problem in ios.

edited Feb 09 '16 at 15:01

チーズパン

2,752
8
42
63

answered Feb 09 '16 at 13:55

Haseeb Tariq

55
1
11

score 1 · Answer 3 · answered Nov 09 '17 at 15:44

Nowadays it doesn't really matter whether picture is wider than 1024px. The issue for me that caused not displaying background-image was: background-attachment: fixed;

In this case, just change this line to background-attachment: scroll; with @media query

background-image won't show on phone browser

3 Answers3