17 August 2010

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:

No comments: