What is the right directory for a background image in a CSS file?

Confluence Development Confluence Server
,
1

I am new to Confluence. I am playing decorators and CSS.

This is my atlassian-plugin.xml:

<plugin-info>
	<description>${project.description}</description>
	<version>${project.version}</version>
	<vendor name="${project.organization.name}" url="${project.organization.url}" />
	<param name="plugin-icon">images/ohanaFavicon.png</param>
	<param name="plugin-logo">images/ohanaPluginLogo.gif</param>
</plugin-info>

<resource type="i18n" name="i18n" location="mysite" />

<web-resource key="mysite-resources" name="mysite Web Resources">
	<dependency>com.atlassian.auiplugin:ajs</dependency>
	<context>mysite</context>
</web-resource>

<theme key="mysiteheme" name="Mysite Theme" class="com.atlassian.confluence.themes.BasicTheme">
	<description>A theme for tests</description>
	<param name="includeClassicStyles" value="false" />
	<resource type="download" name="default-theme.css" location="/includes/css/default-theme.css">
		<param name="source" value="webContext" />
	</resource>
	<resource type="download" name="mysite.css" location="/theme-mysite/css/mysite.css" />		
	<resource type="download" name="mysite.js" location="/theme-mysite/js/mysite.js" />	
	<resource type="download" key="images" name="images/" location="/theme-mysite/images"/>
	<layout key="${atlassian.plugin.key}:main" />
</theme>

<layout key="main" name="Main Decorator" overrides="/decorators/main.vmd" class="com.atlassian.confluence.themes.VelocityDecorator">
	<resource type="velocity" name="decorator" location="/theme-mysite/decorators/main.vmd" />
</layout>

In mysite.css, I have the following CSS rule:

background: url(images/header-bkgd.png) 5px -115px;

However, I am not able to see the display of the background image. What is missing in what I did? The “images” directory is under “theme-mysite” directory, which is under the “resources” directory.

I tried this:

background: url(../images/header-bkgd.png)

When looking at the change in Confluence, Chrome shows 404 for the image and the path to it is:

http://localhost:1990/confluence/s/en_GB/6441/NOCACHE/1.0.0-SNAPSHOT/_/download/resources/images/header-bkgd.png

I also tried

background: url(../theme-mysite/images/header-bkgd.png);

The generated path in Chrome is:

http://localhost:1990/confluence/s/en_GB/6441/NOCACHE/1.0.0-SNAPSHOT/_/download/resources/theme-mysite/images/header-bkgd.png

The image does not show up either.

A broader question: I have read the book <> and did quite online search. But I am still not able to find any sample or tutorial explaining how to refer background images in a CSS file. Where to acquire such knowledge?

2

The css should work, i.e. background: url(...);

Are you able to lookup the image from the browser?

3

Hello, I finally got it work by adding

<resource type="download" key="images" name="images/" location="/theme-mysite/images"/>

outside <theme>

Do you know why?

4

Not sure what <theme></theme> does actually. I’m more used to the <web-resource> tag. But as long as it works right! :slight_smile: