background-image is not displayed in iphone

Question

I don't know why the 'background-image' I set works fine in all browsers but it doesn't in Iphone's safari browser (wich is the one I need),

This is the relevant 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's 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 at http://jsfiddle.net/6dK3T/2/ or at http://piscolabis.info/job_single.html

As you can see i set a full path URL only so you can see that the image is in the server (and in any desktop browser), but i don't know why the image is still not displayed in the iphone

( it's displayed exactly like the other two i didn't set absolute path (and as they are not in jsdfiddle they don't work))

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

any idea why is this happening?

-EDIT-

should look like this

Isn't this like a mistery?

Answer 1

I managed to get it to show on my iPhone by tweaking 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 with Safari on OSX. By removing the

 right: 40px;

in the CSS the images started showing.

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

Answer 2

I had a similar problem with an image that was 2200x2500px but only 130kb and didn't load. It seems like smartphones and tablet don't load images wider than 1024px.

So try to load a smaller image for specific devices and it should works OK.

Edit: I also removed the resizes on the image and the big image appeared. In my case I removed background-size (or put it to auto).

Answer 3

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