Problème de chargement de l'image d'arrière-plan avec CSS (Aptana Studio)

Question

J'utilise le CSS suivant pour définir une image de fond pour mon menu

#menuContainer
{
    background:url('../images/main-bg.png') repeat-x;
}

Mon CSS se trouve à l'intérieur de

~/styles/site.css

et mon image est à l'intérieur

~/images/main-bg.png

Le problème est que cela fonctionne parfaitement dans Chrome mais pas dans Firefox. Mais si l'on change l'URL en

#menuContainer
{
    background:url('images/main-bg.png') repeat-x;
}

Il commence à fonctionner dans Firefox et ne fonctionne pas dans Chrome.

Quelqu'un peut-il nous aider ?

Answer 1

Est-ce que cela fonctionne ?

#menuContainer
{
    background-image:url('./../images/main-bg.png') repeat-x; /* or './../img/main-bg.png' */
}

Si vous avez un nom de domaine (ou si vous utilisez localhost), vous devriez essayer d'utiliser le chemin absolu pour obtenir l'image, car je pense que le problème vient de la façon dont les navigateurs résolvent les chemins relatifs :

#menuContainer
{
    background-image:url('wwww.example.com/images/main-bg.png') repeat-x; /* or 'localhost:8080/images/main-bg.png' - please replace 8080 with the port you are using. */
}

Answer 2

Remplacer par ceci

#menuContainer
{
    background:url('../img/main-bg.png') repeat-x;
}

Answer 3

Il semble que ce soit une erreur de ma part. Pendant tout ce temps, j'ai utilisé Aptana Studio pour vérifier mon site. Quand je lance la page depuis Aptana, elle ouvre automatiquement Firefox, mais ne rend pas les images. Il utilise ce qu'on appelle le serveur interne de Firefox. Je pense que le problème est là. Enfin, j'ai essayé d'ouvrir la page web dans Firefox et Chrome en faisant un clic droit sur l'Index.html dans l'explorateur Windows et cela fonctionne parfaitement dans les deux navigateurs. Merci à tous pour votre aide.