web-dev-qa-db-fra.com

L'image d'arrière-plan n'est pas affichée dans Firefox

Une image définie comme arrière-plan d'une DIV est affichée dans IE, mais pas dans Firefox.

Exemple CSS:

div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}

(Le problème est décrit dans de nombreux endroits mais n'a pas encore vu d'explication ou de solution concluante.)

17
user46665

Désolé, cela est devenu énorme, mais cela couvre deux possibilités qui me sont toujours arrivées.

Possibilité 1

Vous pouvez constater que le chemin d'accès au fichier CSS n'est pas correct. Par exemple:

Disons que j'ai la structure de fichier suivante:

public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html

Sur public/index.html, les chemins suivants incluront le fichier CSS:

#1:  <link href="./css/global.css"
#2:  <link href="/css/global.css"
#3:  <link href="css/global.css"

Cependant, sur public/something/index.html numéro 1 et 3 échoueront. Si vous utilisez une structure de répertoire comme celle-ci (ou une structure MVC, par exemple: http://localhost/controller/action/params), utilisez le deuxième type href.

L'onglet Moniteur Net de Firebug vous dira si le fichier CSS ne peut pas être inclus.

Au sujet des chemins, rappelez-vous que les images sont relatives au chemin du fichier CSS. Alors:

url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */

Passez la souris sur la partie url() de l'attribut background de l'onglet CSS de Firebug pour vérifier si le fichier est en cours de chargement.

Possibilité 2

Il se peut que div n’ait pas de contenu et ait donc une hauteur de 0. Assurez-vous que la div a au moins une ligne de quelque chose dans (par exemple: lorem ipsum delors secorum) ou:

div.something {
    display: block; /* for verification */
    min-height: 50px;
    min-width: 50px;
}

Vérifiez l'onglet de disposition de Firebug (de l'onglet HTML) pour vérifier que la div a une hauteur/largeur.

11
Ross

Bizarrement, après avoir tapé ma tête au clavier pendant des heures, j'ai ajouté display: table; au style de la DIV et l'image de fond est apparu comme par magie dans FF.

7
Eric

Cela ressemble à un problème d'attachement de fond. Il doit être réglé sur fixed (pas scroll) pour fonctionner en FF. Voir: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

5
a avant

Se passe avec moi Le jpg apparaît dans IE mais pas dans Firefox ou Chrome. Voici la solution

Modifiez le css suivant pour l'élément où l'image est affichée. Il peut s'agir de span, div ou de tout autre élément:

bloc de visualisation

3
Hammad

Essayez de mettre le nom de l’image entre guillemets, par exemple:

background-image: url('image.jpg');
1
Philip Morton

Assurez-vous que l'image à laquelle vous faites référence est relative au fichier CSS et non au fichier HTML.

1
GateKiller

essaye ça.

background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
1
Mike Geise

Pour moi, le problème était que le nom de fichier soit sensible à la casse. Je ne sais pas s'il s'agissait de CSS ou de mon système d'exploitation Ubuntu ou de Firefox, mais la façon dont j'ai finalement obtenu les images de fond à afficher était de faire référence à BlueGrad.jpg au lieu de bluegrad.jpg. Le premier des deux est la façon dont il a été enregistré. Je ne pensais pas que ce serait la casse sensible, mais c'était.

1
Stuart

J'ai résolu un problème similaire en renommant la classe CSS. MSIE permet aux identifiants de classe CSS de commencer par des nombres; Firefox ne le fait pas. J'avais créé une classe en utilisant la largeur de l'image en pixels, par exemple. .1594px-01a

Je savais en fait que c'était une syntaxe non standard, mais comme cela fonctionnait bien dans MSIE, je l'avais oublié. Après avoir essayé tous les autres trucs, je me suis enfin rendu compte que ça pourrait être aussi simple que le nom, et dès que je mets une lettre devant la classe, hop!

1
Randall

Au lieu d'utiliser des URL relatives à la page/feuille de style, une solution multi-navigateur consiste à donner une URL relative commençant par la racine de l'application/du domaine.


/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');

FYI: En ce qui me concerne, il n’est pas nécessaire d’utiliser des guillemets dans les URL CSS, je les ai utilisées ici parce que cela semble plus joli.

1
Astravagrant

J'ai trouvé deux choses qui causaient ce problème:

  1. J'utilisais un fichier .tif que Firefox ne semblait pas aimer - j'ai changé pour un fichier .png.
  2. J'ai ajouté overflow:auto; au CSS pour le div - display:block; ne fonctionnait pas pour moi.
0
PeterM

Etes-vous absolument sûr que l'image est un fichier JPG et non un fichier PNG/Other?

Je me demande si IE vous laisse faire avec quelque chose que les autres navigateurs ne sont pas.

De même, les dossiers sont-ils exactement comme spécifiés? 

0
scunliffe

Cela peut paraître très étrange, mais cela fonctionne pour moi>

#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-Origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}

Oui, un double point et une double barre oblique ... ?? !! ?? ... Je ne trouve rien sur Internet qui rapporte ce comportement étrange.

[edit] J'ai écrit un article séparé> https://stackoverflow.com/q/18342019/529802

0
redfox

Il y a cette balise HTML 'base' comme dans 

<head>
   <base href="http://example.com/some/bizarre/directory"/>
</head>

Si cela est présent dans votre page, l'image de l'URL n'est pas relative à votre URL actuelle, mais à l'URL de base donnée. Je ne saurais pas pourquoi IE l'affiche et Firefox non.

L'extension Webdeveloper Firefox offre l'option "Afficher les images endommagées" - cela peut s'avérer utile. Vous pouvez aussi essayer " Live Http Headers " pour voir si/quelle image est demandée et quel est le code de retour.

0
Olaf Kock

Ancien post mais je viens d'avoir un problème similaire images ne pas apparaître dans Firefox s'avère que c'était un add-on Ad-block, dû changer les noms de mes images 

0
ramon22

(Il ne semble pas que ce soient les circonstances exactes du PO mais la question est quelque peu liée et j'ai trouvé une solution de contournement pour ce que je veux partager)

J'ai eu le même problème - image de fond visible partout sauf dans Firefox - et pour moi, le problème tenait au fait que je travaillais sur un add-on de navigateur.

J'injecte un fichier style.css dans le module pageMod avec l'attribut contentStyleFile. Dans celle-ci, il y a la règle background-image: url(/img/editlist.png); dans laquelle je fais référence à un fichier image external à l'add-on. Le problème ici est que, contrairement aux autres navigateurs, Firefox interprète de manière erronée cette racine de domaine externe comme étant la racine interne de l'add-on!

Le fichier css est un port 1: 1 de la version Chrome de l'extension/add-on, je ne voulais donc pas le perdre. C'est pourquoi j'ai ajouté une règle contentStyle supplémentaire en combinaison avec une copie de cette image dans mon dossier de ressources. Cette règle remplace simplement la règle à l'intérieur du fichier css.

(Avec le recul peut-être même une méthode plus élégante qu'avant…)

0
WoodrowShigeru

La seule autre chose à laquelle je puisse penser, à part ce qui a déjà été dit, est la manière dont la photo a été créée. Si vous avez créé/modifié l’image dans Photoshop, veillez à enregistrer sous Enregistrer pour le Web ...

Parfois, si vous utilisez une image JPG pour Photoshop sans enregistrer en tant qu'image Web, il est possible qu'elle n'apparaisse pas dans Firefox. C'est ce qui s'est passé il y a quelques semaines lorsqu'un graphiste a créé une belle en-tête pour un mini-site qui n'apparaîtrait pas dans FF!

Attendre...

Essayez de définir une largeur et une hauteur sur la div pour l’agrandir. Ce peut être un problème sans contenu dans votre div.

0
tahdhaze09

Vous pouvez essayer ceci:

div.something {
background: transparent url(../images/table_column.jpg);
}

Les autres déclarations sont des propriétés CSS abrégées et, autant que je sache, elles ne sont pas nécessaires.
Avez-vous cela en ligne quelque part? J'aimerais voir si je peux me débrouiller un peu. (localement)

0
Kablam

J'ai bien peur qu'il y ait plus de questions que de réponses, mais elles pourraient vous aider à trouver la bonne réponse:

Est-il possible que vous réduisiez la div dans Firefox d'une manière ou d'une autre (avec des floats ou similaires)?

Y a-t-il un autre contenu dans la div pour s'assurer qu'il est assez grand pour afficher l'image?

Avez-vous installé Firebug et examiné les définitions CSS de la page?

0
Zhaph - Ben Duguid

J'ai eu un problème similaire. La raison en est que Firefox est sensible aux champs manquants dans votre css. Chrome complétera (parfois) automatiquement le champ manquant. Le problème apparaît donc sur votre navigateur Firefox.

Vous devez ajouter un type d'affichage, car il est actuellement traduit à une hauteur de 0.

Dans mon cas:

.left-bg-image {
    display: block; // add this line

    background-image: url('../images/profile.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: .6;
    min-width: 100%;
    min-height: 100vh;
}
0
Haim

Mon erreur a été d'utiliser "\" au lieu de "/". Fonctionne correctement dans IE, mais pas dans les autres navigateurs.

0
Riho

Pour ceux qui rencontrent le problème dans FF, mais pas dans Chrome:

Vous pouvez mélanger par erreur entre différents types de valeur pour le poste. 

Par exemple, 

background: transparent url("/my/image.png") right 60%  no-repeat;

Fera cette erreur. Le correctif pourrait être:

background: transparent url("/my/image.png") 100% 60%  no-repeat;
0
valk

Personne n'a mentionné background-Origin alors voilà:

background-image:url('dead.beef');
background-size: 100% 100%;
background-Origin:border-box;

Résolu le problème pour moi; mes antécédents étaient apparemment en dehors de ma div.

0
Erwan Clügairtz

J'ai eu un problème similaire concernant la propriété CSS background-image dans FF. Cela fonctionnait bien dans IE mais refusait de travailler dans FF;) Après avoir lu quelques articles, j’ai établi qu’il était bien question du fait qu’il n’y avait aucun contenu dans la div, sauf un d’arrière-plan s’ajuste à la taille du texte sans s’effondrer ni s’étendre et a donc utilisé une image beaucoup plus grande à l’arrière-plan de la div afin de former une sorte de "recadrage". en plaçant une balise img contenant un fichier .png vierge que j’ai ensuite ajusté à la hauteur correcte de l’image avec une largeur définie à 100%. Cela a fonctionné pour mon problème et j'espère que cela aidera toute autre personne confrontée à un problème similaire. Probablement pas la meilleure solution, mais c'est une solution;)

0
J. Ryan