Arrière-plan .png ne pas montrer dans google Chrome et Firefox

Quelque chose doit m'échapper complètement évidente ici, mais ne peut pas trouver quelque chose en ligne pour me dire le contraire.

Je suis en train de tirer .png dans une page en utilisant:

background:url(img/runner1.png) no-repeat;

Je sais que le chemin d'accès est correct, parce que faire la même chose avec un jpg fonctionne:

background:url(img/header.jpg) no-repeat;

Il ne semble pas fonctionner dans Safari, mais pas dans Chrome ou Firefox.

Suis-je manqué quelque chose?

MODIFIER -
Je suis à l'aide de:

#runner1{
background:url(img/runner1.png) no-repeat;
float: left;
border: 1px solid #FFF;
width: 195px;
height: 205px;
}

pour l'élément suivant:

<div id="runner1"></div>

La page est juste en cours d'exécution en local à partir de mon bureau (donc pas de serveur).

Comme mentionné précédemment, les chemins ne sont pas le problème, car un jpg à partir du même répertoire d'œuvres.

Firebug dit:

runner1.png 
GET
Success
image/png
index.html:201  
0B  
8ms

Mais je ne peux pas voir l'aperçu ou une réponse dans Firebug.

Également accès directement le fichier renvoie le même résultat.

installer firebug sur votre firefox et voir ce qu'il se passe
Qu'obtenez-vous si vous accédez directement à l'png? Est le mime-type mis en place sur le serveur correctement?
Vous n'êtes pas de manquer quelque chose. Il n'y a pas de bug dans le code que vous avez posté et png est pris en charge par tous les navigateurs. Il doit y avoir un autre problème. Essayez d'utiliser google chrome, l'inspecteur dom visualiser la réelle demande HTTP utilisé pour charger le png.
Il n'y a pas assez de code pour nous de donner une réponse qualifiée/suggestion. Dans lequel les éléments et comment utiliser le CSS? Comment voyez-vous cela ne fonctionne pas? Plus d'information est nécessaire...
Il ne devrait pas faire une différence, mais essayez d'utiliser un arrière-plan spécifications: background: transparent url(img/header.png) left top no-repeat;

OriginalL'auteur user1076082 | 2011-12-06

  1. 5

    Résolu!

    Il semblerait que l'enregistrement des Png avec Photoshop crée un PNG qui n'est pas compatible avec chrome ou firefox. Donc, au lieu de cela, j'ai ouvert le fichier avec des feux d'Artifice, ré-enregistré et le png de travail.

    Je suis content que vous l'avez résolu votre problème, mais je suis à peu près certain que j'ai utilisé Png sauvé de la PS dans le passé sans problèmes. Vous avez toute référence?
    mightymeta.co.royaume-uni/257/photoshop-png-certains-solutions rapides
    Je vais avoir le même problème avec les Png sont exportés à partir de GIMP.

    OriginalL'auteur user1076082

  2. 0

    Je suppose que vous vous êtes absent /. Essayez l'url absolue de chemin.

    Merci, malheureusement chemins absolus ne fonctionnent pas non plus.
    Essayez de mettre un peu de contenu dans div? Comme incassable espace?
    Oui - essayé d'ajouter &nbsp; - toujours pas de joie!

    OriginalL'auteur Michael Krelin - hacker

  3. 0

    J'ai eu le même problème avec .png fichiers enregistrés à partir IrfanView: ils ne serait pas affiché comme une image d'arrière-plan avant que j'ai décoché la case "Enregistrer" Couleur Transparente" option dans PNG enregistrer les options. Donc je suppose que PNG doit être enregistré sans les couleurs transparentes à être présentés comme des images d'arrière-plan.

    OriginalL'auteur greenb