Firefox addon background image using script content not working

Question

I am developing an addon for firefox. I need to add some background images. There is also a custom css file. But images cannot be added due to the relative path. I googled and found out that a solution for this can add images through contentStyle. But it does not work.

Here is my code

var pageMod = require("sdk/page-mod");
var self = require("sdk/self");

pageMod.PageMod({
    include: "*",
    contentScriptFile: [
        self.data.url("chrome/js/jquery.js"),
        self.data.url("chrome/js/generic.js")
    ],
    contentScriptOptions: {
        imgeFolder: self.data.url("chrome/images/"),
        fontFolder: self.data.url("chrome/font")
    },
    contentStyleFile: [self.data.url("chrome/css/style.css")],
    contentStyle: [
        "@font-face{font-family: roboto;src: url(" + self.data.url("chrome/font/Roboto-Regular.ttf") + ";}",
        ".genie_watch_popup{background-image: url(" + self.data.url("chrome/images/watch-popout2.png") + ");}"
    ],
    contentScriptWhen: 'end'
});

This is aggressive CSS in style.css

.genie_watch_popup{
    /*background-image: url('chrome-extension://__MSG_@@extension_id__/images/watch-popout2.png');*/
    background-repeat: no-repeat;
    background-position: center center;
    width: 225px;
    height: 209px;
    color:cecece;
    font-size:11px;
    position: absolute;
}

The fonts I included work. But background images are not displayed. Can anybody help me? Is there any other way to enable background images.

Answer 1

, CSS,

ex: google

background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQalyuuX8c-NUWw-BjO_I1lwaHzFm9d96bY4upwsIXu3LtlNqQ");

background-size:100%;
background-repeat: no-repeat;
width:100%;
height:100%;

javascript CSS, . javascript. , , javascript css, css .

javascript css