images within style sheet

Question

I hope someone will be able to help me with this, because it's starting to freak me out.

Have been searching hours to find a way to put image paths in my stylesheet, but have not been able to. The path must not be absolute or "theme dependant". The only way I have been able to fix my issue, is to do add the following within my html file:

<style type="text/css">
    #menu .menu-drop .menu-label {
        background: url(<?php echo get_template_directory_uri()."/admin/images/drop1.png"; ?>) no-repeat right;
    }
    #menu li:hover .menu-drop .menu-label {
        background: url(<?php echo get_template_directory_uri()."/admin/images/drop2.png"; ?>) no-repeat right;
    }
    #menu .menu-sub li:hover {
        background: #2a2a2a url(<?php echo get_template_directory_uri()."/admin/images/select.png"; ?>) no-repeat 10px;
    }
</style>

As you can see, I simply add the background image "manually" in the html file after including the stylesheet in the header.

Any idea how to transfer the above to a stylesheet, or is that not possible?

Answer 1

Use a relative path in your stylesheet. If the CSS file is in /style.css:

#menu .menu-drop .menu-label {
    background: url(admin/images/drop1.png) no-repeat right;
}