background-image wird nicht angezeigt iphone
Ich weiß nicht, warum die 'hintergrund-Bild' ich gesetzt, funktioniert in allen Browsern, aber es funktioniert nicht im Iphone safari browser (das ist der, den ich brauche),
Dies ist der entsprechende Stil für die Frage
/**************************************************
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*/können Sie den online-code bei http://jsfiddle.net/6dK3T/2/ oder bei http://piscolabis.info/job_single.html
Wie Sie sehen können habe ich eine vollständige Pfad-URL nur so kann man sehen, dass das Bild in dem server (und in jedem desktop-browser), aber ich weiß nicht, warum das Bild noch nicht angezeigt im iphone
( es ist angezeigt, genau wie die anderen beiden, die ich nicht mit absoluten Pfad (und weil Sie nicht in jsdfiddle Sie nicht arbeiten))
Ist es, weil der hintergrund-Bild? ist es, weil das position:relative?
irgendeine Idee, warum dies geschieht?
-BEARBEITEN-
sollte wie folgt Aussehen
Ist das nicht wie ein Mysterium?
- Ich sah dies auf meinem Iphone, und ich denke, die Bilder kommen. Sollten Sie engen Ihre Geige nur der Teil, der von Ihnen ein problem.
- auch der Ort, wo das problem beginnt, ist meine Frage, können Sie sehen, die rot, blau und pink Bilder in Ihrem Telefon? (diejenigen, die in der Dunkelheit der rechten navigation Menü?) wäre es nicht Ihre Antwort mit einem Kommentar? :$
- Sorry, wahrscheinlich hätte ein Kommentar - ich bin neu hier. Ja, ich kann sehen, die rot, blau und rosa Bilder.
- Dude thats weird. Haben Sie überprüft, das Blaue Bild in der jsfiddle? (zu vergleichen. es sollte 3 Bilder auf der dunklen navigatin im Menü, nicht zu verwechseln mit den rechten Rand)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich es geschafft, es zu bekommen, um zu zeigen, auf meinem iPhone durch tweaking Ihre Stile ein bisschen :
Das problem war das gleiche mit Safari auf OSX. Durch das entfernen der
in der CSS die Bilder begannen zu zeigen.
http://jsfiddle.net/5sX54/9/
Ich hatte ein ähnliches problem mit einem Bild, dass 2200x2500px aber nur 130kb und nicht geladen.
Es scheint, wie smartphones und tablet nicht laden von Bildern, die breiter als 1024px.
So laden versuchen Sie, ein kleineres Bild für bestimmte Geräte und es sollte OK funktioniert.
Edit: ich habe auch entfernt die Größe auf dem Bild und das große Bild erschien. In meinem Fall habe ich entfernt
background-size(oder stellen Sie es aufauto).versuchen Sie geben eine genaue Höhe der
#panel.right ul.visible li a span.liLeftelement.Ich veränderte Ihre Geige, Hinzugefügt 90px statt 100% und es scheint funktioniert auf meinem iphone:
http://jsfiddle.net/UGEyS/
Sind Sie be das gleiche Hintergrundbild auf dem iphone? Das sieht aus wie ein ziemlich riesiges Bild, so könnte es sein, die Flucht des Viewports irgendwie? Ich habe ein iphone zum testen und das ist ein Schuss im Dunkeln, aber Sie können vielleicht versuchen, Ihren html-Konformität der Browser viewport Größe mit einem meta-tag, wie diesem:
Oder Sie können einfach verwenden Sie ein media-query Zielgruppe der viewport kleiner als so etwas wie 480px, verwenden Sie ein anderes, kleineres Bild im hintergrund.