Skip to main content

Developing in Cascade troubleshooting

Why aren't my CSS background images being displayed?

CSS background images need special tags telling the system you're referring to an image managed by Cascade CMS. Consider these lines in a CSS file:

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

To link to that image from a CSS file inside Cascade:

  1. Click Edit on the CSS file containing the reference.

  2. Add tags around the full path to the image's location inside Cascade CMS:

    CSS 
    .content{
    background-image: url('');
}
  3. Click the Configure pane.
  4. Check Rewrite asset links in file. This makes the system locate anything within those tags and rewrite the link.
  5. Click Save & Preview.
  6. After verifying your changes, click Submit.

Assuming the system locates the image, the rewritten link looks something like:

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

See Linking for how asset links are resolved generally.