SOLUTION: CSS Background Image Not Displaying in Mozilla FireFox

From previous experiences, I am aware of the fact that new WordPress themes come with new bugs. However, I was not quite prepared for this last one; my background image appeared fine in Internet Explorer but went missing in FireFox.

Rather than spend the whole day trying to explain the (sometimes) complicated and erroneous suggestions I was given by some so-called experts, I will go straight to the point with a simple solution which can be implemented by making a little addition to your Style-sheet code. Shhh!

Old Code



background: transparent url(“images/body-image.png”) repeat center top;

New Code



background: transparent url(“images/body-image.png”) repeat center top; display:table; width:100%;


Spot the difference? Yes, you are right! –> display:table; width:100%;

Be the FIRST to Know - Join Our Mailing List!

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Previous ArticleNext Article
Thanks for reading this article. If you're new here, why don't you subscribe for regular updates via RSS feed or via email. You can also subscribe by following @techsling on Twitter or becoming our fan on Facebook. Thanks for visiting!

1 Comment

  1. That’s looks like great. In today’s world, governed by the Internet, everybody wants to build a website, If you’re looking serious to the web design then HTML is a must.
    There are free services that allow you to check and fix the validity of your html codes.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Send this to a friend