Firefox addon background image using content script not working

Question

I am developing an addon for firefox. I need to add some background images. There is a custom css file also. But images can't be added from there because of relative path. I googled and found out that the solution for this could be adding images through contentStyle. But it is not working.

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 the corrosponding 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 which i have included are working. But background images are not showing up. Can some one help me? Is there any other way i can include background images.