I have a few CSS files that I am inluding in velocity file in a Confluecne plugin. The CC file has reference to some images that are bundled in the plugin. How do I reference the context path in CSS file? Or may be I should ask how do you guys avoid having image path referenced in a CSS file.

  1. Ajay Goel

    Thanks Raju. The CSS files has MANY images and I was trying to avoid defining each on of those in the plugin.xml.

    Joseph, the css files is used acrosss many different folders in which case the reference path won't really work as the same class is being used by different vm file in different folder.

  2. Raju Kadam


    You dont have to define each and every image in plugin.xml. Just declare the images folder once in atlassian-plugin.xml

    <resource type="download" name="images/" location="includes/images/" />



CommentAdd your comment...

2 answers


    Hi Ajay,

    Have a look at the [creating style sheet theme in Confluence]

    What you need to do is make image as a downloadable resource. And in css you just refer the image file name. Here is section from this page.

    Images in subdirectories (optional)
    You can put your images into a subdirectory within your theme if you want to:
    For example:
    <!-- Images --> <resource type="download" name="filename.gif" location="images/filename.gif"/> Note that when you reference that file in your CSS, you simply use the name and not the path in the location. For this example: .selector { background-image: url("filename.gif"); }

    hope this helps,


    1. Ron Horner

      I really like this answer. If you want to not have to list out all of the images in your image folder you can use this {code} <resource type="download" name="images" location="/images"/> .selector { background-image: url("images/filename.gif"); } {code}

    CommentAdd your comment...

    You can use relative paths to refer to images in your CSS file. This ensures that the image URL will resolve correctly in situations with and without a context path.


    background-image: url("../../download/resources/my.plugin.key/image.png");

    1. Jim Bethancourt

      What about if it's batched mode? It looks like it might be slightly different, but I can't get the path quite right (at least not yet...)



    2. Jim Bethancourt

      It turns out I was able to get the images to display correctly using Raju's instructions.

    3. Joseph Clark

      Image resources aren't batched, so having batched mode on or off won't affect it.

    CommentAdd your comment...