Why aren't my CSS background images displaying inside of Cascade Server?

CSS background images require special tags that let the system know you are referring to an image that is managed by Cascade Server. Consider the following lines in a CSS file:

.content{
    background-image: url('/images/photo.png');
}

To link to this image from the CSS file within Cascade, the following steps must to be taken:

  • Click Edit on the CSS file containing the reference to the background image
  • Add [system-asset] ... [/system-asset] tags around the full path to the image location inside of Cascade Server. For example:
.content{
    background-image: url('[system-asset]/images/photo.png[/system-asset]');
}
  • Click the System pane
  • Check the box to Rewrite links in file. This option will force the system to attempt to locate anything within [system-asset] ... [/system-asset] tags. Once it finds the asset, it will rewrite the link accordingly.
  • Click Submit

Assuming the system is able to locate the image in question, the rewritten link (seen in the View tab for the CSS file) should look something like this:

background-image: url('/renderfile/4ed63b960a00018a0141055a46b50931/images/photo.png');