Find Questions…

Close ×
First time here? Check out the FAQ!

Context path in CSS file for images

Ajay Goel asked this question · 26 karma ·

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.

4080 views

Ajay Goel · 26 karma ·

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.

Raju · 441 karma ·

Ajay,

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/" />

cheers,

Raju

2 Answers:

Raju · 441 karma ·

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,

Raju

Joseph Clark [Atlassian] · 21,955 karma ·

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.

Example:

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

Jim Bethancourt · 736 karma ·

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...)

Thanks,

Jim

Jim Bethancourt · 736 karma ·

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

Joseph Clark [Atlassian] · 21,955 karma ·

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

·1 user liked this

Looking for something else?

Find Questions…

or Browse other questions tagged:

or Ask a Question