In a Chrome extension I try to load an image with a content script using CSS. The image does not load.

Here is the manifest.json:

"content_scripts": [
   {
     "matches": ["<all_urls>"],
     "css": ["content.css"],
     "js": ["content.js"],
      "run_at": "document_end",
      "all_frames": true
   }
 ]

With the content.js I add an element to pages which indeed it successfully gets added every time.

And here is the CSS code:

#my_added_element {
    background: url('chrome-extension://__MSG_@@extension_id__/icon.png') right center;
}

I also tried:

#my_added_element {
    background: url('chrome-extension://__MSG_@@extension_id__/content/icon.png') right center;
}

in case there was a restriction about loading resources from another directory.

In both cases the CSS script gets injected as expected, as I can confirm using the developer tools, and if I click on the image's CSS link in the developer tools it opens without issues in a new tab.

So what prevents the load of the image in pages? What else should I check?