Michael Portwood

Fixing Firefox Background Image Compatibility Issue

A common browser compatibility issue affecting Mozilla Firefox browsers is how it handles background images. A recent Google search returned nearly a half million links addressing the problems.

Most of these links focus on syntax differences in how Firefox interprets background images and other differences that can perplex web developers.

Examine the following simplified CSS, which does not work properly in a Firefox browser:

#footer {
   background:url(../images/footerimage.tiff);}

Conventional wisdom suggests that the problem is with the missing quotations around the path name or other syntax-related changes. After some investigation, none of these approaches yield a rendered background image.

Changing the background image file type and its reference from TIFF to, in this case, PNG resolved the problem. Below, you will find the highlighted change.

#footer {
   background:url(../images/footerimage.png);}

By making this simple change, the HTML retains its browser compatibility, and the resulting page correctly displays in a Mozilla Firefox browser.

Find more interesting articles by Michael Portwood at www.MichaelPortwood.com