CSS background images require special tags that let the system know you are referring to an image that is managed by Cascade CMS. 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 CMS. For example:
.content{
    background-image: url('[system-asset]/images/photo.png[/system-asset]');
}
  • Click the Configure 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 Save & Preview
  • After verifying your changes, click Submit

Assuming the system is able to locate the image in question, the rewritten link should look something like this:

background-image: url('/renderfile/4ed63b960a00018a0141055a46b50931/images/photo.png');
Did this answer your question?