Michael Portwood

Fixing Mozilla Firefox Background Image Browser Compatibility Issue

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

While most of these links focus on syntax differences in the way Firefox interprets background images, there are other differences that can perplex web developers.

Take a look at 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, the way relative pathing is presented, and other syntax related changes. After some investigation, none of these approaches yield a rendered background image.

By changing the background image filetype 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 properly displays in a Mozilla Firefox browser.

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