Background images not displaying in Firefox

  • I have CSS background images on my WordPress site’s home page (https://medeintranet.dreamhosters.com/). These images work on Chrome and Safari, but do not show up in Firefox.

    Interestingly, this issue only happens on my home page — images on the other pages are not affected. The only thing I can isolate as different on my home page images is that there are CSS transitions on the home page images. However, I tried to remove the transitions but the problem didn’t resolve so apparently this isn’t the primary source of the issue.

    A couple of additional details: the images showed up fine in Firefox before I ported the site over to WordPress. The images also appear to be there – they are displayed in page info > media, in the code inspector, and, when I pull on the space where they should be with my cursor, a ghost of the image appears. I have also used the full url to call the images from my css (probably not the best idea, but it was the only way I could get the images to display), so it doesn’t appear to be an issue where I’ve got my ../s wrong.

    Any ideas for why my home page images aren’t appearing in Firefox?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    After inspecting the page the images are there, just set to opacity: 0;. However I can see in Chrome an opacity: 1; is added via javascript to get the images to be visible. Firefox doesn’t seem to be processing the javascript correctly to put that inline style on. If you add the inline style of opacity: 1; to the ._60block you’ll see your images.

    I’m not entirely sure why Firefox wouldn’t pick up on the Javascript making the inline changes but it’s somewhere for you to start looking.

    ~ Steven

    Thread Starter newbie2017

    (@newbie2017)

    Thank you, Steven!! I changed the opacity in the offending section of the js and the images now show up in firefox. Success!

    One knock-on effect: changing the opacity seems to have broken the hover transform animation on two of my images (quick links & things to share). Both have the same data-ix=”tile-3″. I tried to change the data-ix to a working one (“tile-2”). I also tried to create two new data-ix groups (“tile-5”, “tile-6”). Neither of these solutions fixed the animation problem — in fact, both broke the images completely.

    I guess, worst-case scenario, I can get rid of my hover animations but, they are a nice feature on the site and I’d like to keep them, if possible. Any thoughts on how to fix the new hover transform issue?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Background images not displaying in Firefox’ is closed to new replies.