Disappearing background image in the Web Developer plug-in for Firefox

One of the most powerful ways to view and edit the CSS of web sites on Firefox is the Web Developer extension. However, I recently noticed that when I selected Edit CSS from the extension's toolbar, the background images on the page disappeared.

Some research revealed a good thread on this issue. The problem had to do with the "../" notation in the stylesheet; changing these to be relative to the site root fixed the problem. For example, this:

background: transparent 
   url(../img/bg.png) no-repeat 0 0;

becomes this:

background: transparent 
   url(/cms_prd/global/img/bg.png) no-repeat 0 0;

This is assuming that the background image is here:

http://localhost/cms_prd/global/img/bg.png