Firefox Add-On CSS not displaying background-image

Question

I am working on a Firefox Add-On which uses jQuery to insert div tags at specific locations in pages rendered.

The div tags are styled using a CSS file which is injected using the following code:

var style = Style({
  uri: './dist/app.css'
});

In this CSS file I have:

.myExt_injected_div_tag {
    background-color: blue !important;
    background-image: url('/locaton/of/my/image.png') !important;
}

This CSS is being applied because the background colour works fine (I've tried changing it to different colours to be 100%).

The problem is the background-image tag has no affect. I have tried a multitude if different values from resource://my-ext/data/img.png to URLs to images with FQDN which works when I manually enter in the browser.

How can I get the background image to change?

Answer 1

The URL for background-image has to be relative to location of the HTML/CSS file that render's this image.

ex: data\html\pane.html
    data\images\pane-img.png
    data\styles\pane.css

Then in pane.css:

background-image:url("../images/pane-img.png");