Google Chrome Extensions - Can't load local images with CSS

Bjarki Jonasson picture Bjarki Jonasson · Aug 24, 2010 · Viewed 50.5k times · Source

I have a simple Chrome extension that uses the content script feature to modify a website. More specifically, the background-image of said website.

For some reason I can't seem to be able to use local images, even though they are packed in the extension.

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

That's it, the simplest CSS... but it won't work. The browser doesn't load the image.

Answer

David Lemphers picture David Lemphers · Jan 14, 2012

Chrome has i18n support that provides the ability to reference your extension in your CSS. I keep my images in an image folder in the extension, so reference assets in the CSS like so:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');