background-image ne s'affiche pas dans l'iphone

Je ne sais pas pourquoi le "background-image" j'ai installé fonctionne correctement dans tous les navigateurs, mais il n'est pas dans l'Iphone du navigateur safari (qui est celui que j'ai besoin),

C'est le style correspondant pour la 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*/

vous pouvez vérifier le code à http://jsfiddle.net/6dK3T/2/ ou à http://piscolabis.info/job_single.html

Comme vous pouvez le voir j'ai mis un chemin d'accès complet de l'URL seulement de sorte que vous pouvez voir que l'image est dans le serveur (et dans tout navigateur de bureau), mais je ne sais pas pourquoi l'image n'est toujours pas affiché dans l'iphone

( il s'affiche exactement comme les deux autres, je n'ai pas de chemin d'accès absolu (et comme ils ne sont pas dans jsdfiddle ils ne travaillent pas))

C'est à cause de l'image de fond d'écran? est-ce parce que la position relative?

aucune idée pourquoi est-ce qui se passe?

-EDIT-

devrait ressembler à ceci

background-image ne s'affiche pas dans l'iphone

N'est-ce pas comme un mystère?

J'ai regardé sur mon Iphone, et je pense que les images sont à venir. Vous devriez limiter votre violon vers le bas, juste la partie qui est en vous donnant un problème.
bien l'endroit où commence le problème est dans ma question, pouvez-vous voir le rouge, le bleu et le rose des images dans votre téléphone? (ceux dans l'obscurité menu de navigation de droite?) ne pas répondre à un commentaire? :$
Désolé, aurait probablement été un commentaire - je suis de nouveau à cela. Oui, je peux voir le rouge, le bleu, le rose et les images.
Mec c'est bizarre. Avez-vous vérifié le bleu de l'image dans tje jsfiddle? (à comparer. il devrait être de 3 images sur le noir navigatin menu, à ne pas confondre avec le droit frontières)

OriginalL'auteur Toni Michel Caubet | 2011-09-03

6

J'ai réussi à l'obtenir à afficher sur mon iPhone en peaufinant vos styles un peu :
```
#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;
}
```
Le problème est le même avec Safari sur mac OSX. En supprimant la
```
 right: 40px;
```
dans le CSS les images a commencé à montrer.

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

Essayé de les retravailler, la modification de ces propriétés dans le CSS de ne pas les faire apparaître dans mon iphone... vous en êtes sûr?
Ce qui m'a sauvé--plus précisément, c'est le background-size: cover;. J'ai eu un drôle de problème où l'image de fond a été montrant fine sur le bureau Safari, amende de bureau Chrome, fine sur le simulateur iOS, mais n'était pas visible sur le réel, périphériques physiques. L'ajout de background-size: cover; fait travailler partout.

OriginalL'auteur Pat
5

J'ai eu un problème similaire avec une image qui a été 2200x2500px mais seulement 130kb et ne se charge pas.
Il semble que les smartphones et la tablette ne charge pas les images plus larges que 1024px.

Donc, essayez de charger une image plus petite pour des périphériques spécifiques et il fonctionne OK.

Edit: j'ai également supprimé les redimensionne l'image et la grande image est apparue. Dans mon cas, j'ai enlevé background-size (ou le mettre en auto).

Merci beaucoup pour ce commentaire, j'ai été m'arracher les cheveux à essayer de comprendre une grande image de fond.
Qui a résolu mon problème.

OriginalL'auteur Grsmto
1

essayer de donner à une hauteur exacte de la #panel.right ul.visible li a span.liLeft élément.
J'ai modifié votre violon, a ajouté 90px au lieu de 100% et il semble que le travail sur mon iphone:
http://jsfiddle.net/UGEyS/

OriginalL'auteur szajmon
0

Êtes-vous de charger le même arrière-plan de l'image sur l'iphone? Qui ressemble à une jolie image énorme, alors il serait peut-être de s'échapper de la fenêtre d'affichage en quelque sorte? Je n'ai pas un iphone afin de le tester et c'est un coup de feu dans l'obscurité, mais vous pouvez peut-être essayer de mettre votre code html afin de les rendre conformes aux navigateurs taille de la fenêtre avec une balise meta, comme celui-ci:
```
<meta name="viewport" content="width=device-width, initial-scale=1"/>
```
Que ou vous pouvez simplement utiliser une requête de média pour cible une fenêtre plus petite que quelque chose comme 480px utiliser un autre, plus petite image de fond.

cette image est assez petite.. piscolabis.info/licht/img/azul.png
ahh, j'étais en train de regarder la grande image de fond :/

OriginalL'auteur Andres Ilich

Vous devez vous connecter pour publier un commentaire.