J'ai un bouton qui fonctionne dans tous les navigateurs sauf Safari. Voici le code CSS:CSS - erreur d'image de fond seulement dans Safari
div#home-buttons #rv {
background: url("/Portals/248820/images/layout/home-rv.jpg") no-repeat scroll center top/165px 115px #273e78;
}
La console d'erreur Safari dit: "Ressource interprété comme image, mais transféré avec un type MIME text/plain."
Des idées sur la façon d'aborder cela?
Merci!
Le problème est que Safari ne comprend pas ou ne prend pas en charge background-size dans le raccourci background. Je ne sais pas pourquoi, mais je l'ai compris une fois.
Je mettrais de cette façon, Wich fonctionnera:
background: #273e78 url("/Portals/248820/images/layout/home-rv.jpg") no-repeat scroll center top;
background-size: 165px 115px
Comment je l'ai dit, j'avais cette question une fois résolu le problème ainsi. J'espère que cela fonctionne pour vous aussi.
Les citations ne sont pas le problème. W3C dit que vous pouvez utiliser des guillemets ou non, simple ou double. C'est à vous. Plus d'informations à ce sujet ici: http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
Parfait merci! – jeffusu
Ce n'est pas nécessairement une excellente solution. Par exemple, j'ai une page de blog qui devient très longue. Cette page utilise un arrière-plan particulier que les autres pages n'ont pas. "background-size: cover" rend l'arrière-plan fixe sur tous les navigateurs (même Android), mais pas sur Safari. Sur Safari, l'arrière-plan est fixé avec le contenu et il défile avec le contenu, de sorte qu'il s'étend à la longueur (hauteur) de la longue page. –
En utilisant votre astuce, je devrais écrire quelque chose de ridicule comme "hauteur: 5000 px" ou bien si j'utilise la dimension de l'iPad, qui est 768 pixels, alors ce que je reçois est principalement un fond blanc avec l'image montrant 768 pixels de hauteur seulement au milieu de la page. Ce n'est pas l'effet désiré. Je cherche à ce que Safari garde l'arrière-plan corrigé comme les autres navigateurs. De cette façon, le contenu se déplace librement et je peux contrôler l'arrière-plan sans l'option de non-répétition. Je vous remercie. –
Il n'est pas nécessaire de doubler le chemin d'accès à l'image. Comme cette approche:
#home-buttons, #rv {
background: url(/Portals/248820/images/layout/home-rv.jpg) no-repeat scroll center top/165px 115px #273e78;
}
Certains navigateurs n'obtiennent pas le chemin avec une barre oblique au début. Essayez de commencer avec ../portals/248820/images/layout/home-rv.jpg
Bonne chance avec ça.
Merci pour la réponse. J'ai essayé les changements que vous avez suggérés mais ça ne se présente toujours pas. – jeffusu
Il semble que Safari ne trouve pas l'image donnée dans l'URL. Avez-vous la dernière version de Safari? Vérifiez aussi cela –
http://stackoverflow.com/questions/658238/debug-message-resource-interpreted-as-other-but-transferred-with-mime-type-appl –
Peut-être que je suis derrière le temps, mais je n'ai jamais vu quelque chose comme ça dans une URL d'image: 'center top/165px 115px'. Qu'est-ce que c'est censé faire? Que se passe-t-il si vous utilisez simplement 'center top'? –