Search code examples
cssimagewordpressstylesheetadmin

WordPress admin stylesheet not showing images

In my plugin I have some styles for the admin area. Originally, I was just doing them in the main plugin file, inline, but now I've enqueued them. The stylesheet is enqueued properly; all the styles are working, except that -- any images referenced in the stylesheet do not show up. When the styles were inline they showed up fine, but when I enqueue the stylesheet they do not show up. It's not an issue with the path because the stylesheet is in the same directory as the plugin file where the styles were formerly found inline.

Here's how I've enqueued it:

function my_style() {
wp_register_style( 'style', plugins_url('style.css', __FILE__) );
wp_enqueue_style( 'style' );
}
add_action( 'admin_enqueue_scripts', 'my_style' );

And again: the enqueue is correct because all the other styles work fine. So here is an example of an image in my stylesheet:

#mycustom-mb h3:before {
    content:url("../wp-content/plugins/my-plugin/images/banner.png");
}

And that same line works when the style is inline, rather than enqueued. Is WordPress doing something weird to block my images? It doesn't even give me a file not found error in Firebug, nor does it show the broken image link in the header (like it does when you have a bad path). It's just not there. And in Firebug, Firebug doesn't even try to search for an image when you hover over its link, like it does on all other images. So it feels like WordPress is doing something weird to images when a stylesheet is enqueued to the admin.

I can't do a regular include either, because, though it works fine, it gives a "unexpected characters" warning message on plugin activiation when I have my CSS inline or included.

Solution

  • When using url() inside one of your css rules, you have to remember, that the paths are relative to the stylesheet that they're found in.

    So, in the case of inline styles, the path is relative to /wp-admin/, but when you load a stylesheet found in /wp-content/plugins/my-plugin/style.css, all of the paths will be relative to /wp-content/plugins/my-plugin/.

    Therefore in order to target the correct URL at which your images are found, you just have to use this: 

    #mycustom-mb h3:before {
    content:url("images/banner.png");
}

    I'm now using Chrome Developer tools, which I know for sure displays a 404 not found error when a rule from a stylesheet causes the browser to load an image, so I'm not sure why FireBug would not show any errors.