Context path in CSS file for images

Ajay Goel November 3, 2011

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.

4 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

6 votes
Answer accepted
Raju
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 3, 2011

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

RonH February 24, 2015

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}

2 votes
Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
November 3, 2011

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 11, 2012

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 11, 2012

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

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 11, 2012

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

0 votes
Raju
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 3, 2011

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

0 votes
Ajay Goel November 3, 2011

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.

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events