Bjarki Jonasson Bjarki Jonasson - 4 years ago 146
CSS Question

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

I have a simple Google 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 code... but it won't work. The browser doesn't load the image.

Answer Source

Your image URL should look like chrome-extension://<EXTENSION_ID>/image.jpg

You would be better off replacing css through javascript. From docs:

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download