How to get image resources to custom theme?

Confluence Development Confluence Data Center
1

Here is code of atlassian-plugin.xml

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
    <plugin-info>
        <description>${project.description}</description>
        <version>${project.version}</version>
        <vendor name="${project.organization.name}" url="${project.organization.url}" />
        <param name="plugin-icon">images/pluginIcon.png</param>
        <param name="plugin-logo">images/pluginLogo.png</param>
    </plugin-info>

    <web-resource key="dark-theme-resources" name="Dark Theme Web Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <resource type="download" name="images/" location="/images"/>
        <context>dark-theme</context>
    </web-resource>

    <theme key="dark-theme" name="Dark Theme" class="com.atlassian.confluence.themes.BasicTheme">
        <description>A simple theme with dark look and feel.</description>
        <param name="includeClassicStyles" value="false"/>
        <resource type="download" name="dark-theme.css" location="/css/dark-theme.css"/>
        <colour-scheme key="${atlassian.plugin.key}:dark-colours"/>
        <space-ia value="true"/>
    </theme>

     <colour-scheme key="dark-colours" name="Back and Blue Colours" class="com.atlassian.confluence.themes.BaseColourScheme">
        <colour key="property.style.topbarcolour" value="#000000"/>
        <colour key="property.style.spacenamecolour" value="#999999"/>
        <colour key="property.style.headingtextcolour" value="#663300"/>
        <colour key="property.style.linkcolour" value="#663300"/>
        <colour key="property.style.bordercolour" value="#440000"/>
        <colour key="property.style.navbgcolour" value="#663300"/>
        <colour key="property.style.navtextcolour" value="#ffffff"/>
        <colour key="property.style.navselectedbgcolour" value="#440000"/>
        <colour key="property.style.navselectedtextcolour" value="#ffffff"/>
    </colour-scheme> 

    <!-- add our i18n resource -->
    <resource type="i18n" name="i18n" location="dark"/>
    
</atlassian-plugin>

And CSS file:

body {
    background-image: url(../fi.i4ware.dark:dark-theme-resources:images/52311-background.png) center center;
}

#header .aui-header {
    background-color: black !important;
    color: white !important;
}

#main .aui-page-panel-content .content-body {
    background-color: transparent !important;
    color: #fff !important;
}

#footer .aui-footer {
    background-color: black !important;
    border-color: white !important;
}

.aui-page-panel {
    background-color: black !important;
    color: #fff !important;
}

#login-container {
    background-color: black !important;
    color: #fff !important;
}
2

I got this work with my own efforts codes below:

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
    <plugin-info>
        <description>${project.description}</description>
        <version>${project.version}</version>
        <vendor name="${project.organization.name}" url="${project.organization.url}" />
        <param name="plugin-icon">images/pluginIcon.png</param>
        <param name="plugin-logo">images/pluginLogo.png</param>
    </plugin-info>

    <theme key="dark-theme" name="Dark Theme" class="com.atlassian.confluence.themes.BasicTheme">
        <description>A simple theme with dark look and feel.</description>
        <param name="includeClassicStyles" value="false"/>
        <resource type="download" name="dark-theme.css" location="/css/dark-theme.css"/>
        <resource type="download" name="52311-background.png" location="/images/52311-background.png"/>
        <space-ia value="true"/>
    </theme>

    <!-- add our i18n resource -->
    <resource type="i18n" name="i18n" location="dark"/>
    
</atlassian-plugin>

body {
    background-image: url(../fi.i4ware.dark:dark-theme/52311-background.png);
}
3

I got this now work with hard fight with codes below:

body {
    background-image: url(../fi.i4ware.dark:dark-theme/52311-background.png);
}

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
    <plugin-info>
        <description>${project.description}</description>
        <version>${project.version}</version>
        <vendor name="${project.organization.name}" url="${project.organization.url}" />
        <param name="plugin-icon">images/pluginIcon.png</param>
        <param name="plugin-logo">images/pluginLogo.png</param>
    </plugin-info>

    <theme key="dark-theme" name="Dark Theme" class="com.atlassian.confluence.themes.BasicTheme">
        <description>A simple theme with dark look and feel.</description>
        <param name="includeClassicStyles" value="false"/>
        <resource type="download" name="dark-theme.css" location="/css/dark-theme.css"/>
        <resource type="download" name="52311-background.png" location="/images/52311-background.png"/>
        <space-ia value="true"/>
    </theme>

    <!-- add our i18n resource -->
    <resource type="i18n" name="i18n" location="dark"/>
    
</atlassian-plugin>
4

My new Confluence Theme looks like this now:

image
image1920×1080 128 KB