Background-image is not displayed on iphone

Question

I don’t know why the “background image” that I installed works fine in all browsers, but it’s not in the Safari browser for Iphone (exactly the one I need),

This is the appropriate style for the question.

/************************************************** ESTILOS PARA SINGLE JOB **************************************************/ /*Deleting all styles that dont take any effect with the question*/ #panel.right ul.visible li a span.liLeft{ width:95px; float:left;height:100%;display:block; position:relative; right:40px; /*HERE I INIT THE STYLE OF THE BACKGROUND IMAGE BUT I DONT SET THE URL*/ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index:10; } #panel.right ul.visible li a span.liRight{ background:black !important; color:#fff; } #panel.right ul.visible li a span.liRight{ z-index:9; } #panel.right ul.visible li#blue a{ border-color:#0C7CC3; } #panel.right ul.visible li#pink a{ border-color:#C21B7B; } #panel.right ul.visible li#orange a{ border-color:#E83B35; } /* HERE i set the urls for the different Id and i can't see them in the iphone */ #panel.right ul.visible li#blue a span.liLeft{ background-image:url('http://piscolabis.info/licht/img/azul.png'); } #panel.right ul.visible li#pink a span.liLeft{ background-image:url(../img/rosa.png); } #panel.right ul.visible li#orange a span.liLeft{ background-image:url(../img/naranja.png); } /* deleting more styles*/ 

you can check the online code http://jsfiddle.net/6dK3T/2/ or http://piscolabis.info/job_single.html

As you can see, I set the full URL of the path so that you can see that the image is on the server (and in any browser on the desktop), but I don't know why the image is still not showing on iphone

(it displays just like the other two, I did not set the absolute path (and since they are not in jsdfiddle, they do not work))

Is it because of the background image? is it because the position: relative?

any idea why this is happening?

-Edit -

should look like this:

Doesn't that look like mistery?

Answer 1

I managed to display it on my iPhone, changing your styles a bit:

 #panel.right ul.visible li a span.liLeft{ width:95px; float:left; height:100%; display:block; position:relative; margin-left: -40px; margin-right: 40px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index:10; } #panel.right ul.visible li a span.liRight { background:black !important; float: left; color:#fff; } 

The problem was the same as in Safari on OSX. Deleting

  right: 40px; 

images appeared in CSS.

http://jsfiddle.net/5sX54/9/

Answer 2

I had a similar problem with an image that was 2200x2500px but only 130kb and did not load. Smartphones and tablets don't seem to upload images wider than 1024 pixels.

So try downloading a smaller image for certain devices, and it should work fine.

Edit: I also deleted the image size on the image, and a large image appeared. In my case, I removed the background-size (or put it in auto ).

Answer 3

try giving the exact height to #panel.right ul.visible li a span.liLeft . I changed your fiddle, added 90px instead of 100% and it seems to work on my iphone: http://jsfiddle.net/UGEyS/

Answer 4

Are you uploading the same background image to iphone? This looks like a pretty big image, so it can somehow slip away from the viewport? I don’t have an iphone for testing, and this is a shot in the dark, but you can try installing html so that it matches the browser viewport size using a meta tag, for example:

 <meta name="viewport" content="width=device-width, initial-scale=1"/> 

This or you can simply use a media query to target the viewport smaller than something like 480px to use another smaller background image.