How do I make a relative path in a custom CSS file to reference the file hosted in the course?

[denism]

I'm creating a theme for Canvas using a customized CSS file. My idea is to create a kind of layout/template that will use an image hosted inside the files folder of each course - I want to use a "background.png" file, and each course would have a different version of this file in its files folder.

How do I make a relative path/link so that it would automatically reference the file hosted in the course I put the link in?

For example, imagine a course of id 01, and another of id 02. Both would use a background image hosted in their own files folder. Then, in my CSS file I'd have something like this:

Background-image: url(/files/bg.png)

But those two courses would print different backgrounds, since I'd have two different file names "bg.png", each in their respective files folder. Could I create this kind of relative path/link here? If so, how?

[josephclaytonha · Accepted solution]

 if I understand, you basically want to access the files inside a Canvas course, using CSS, and move them externally. Files in Canvas are not linked to a course, they have their own unique identifier. Why? For instance, a teacher might have an exam stored in files that they don't want accessible until a certain time. If you could just go into the Files externally, anyone in the world could pull that exam out- even if they weren't enrolled in the class or a member of Canvas. 

Here's an example of what I mean: 

This is the files section of a random sandbox course. If I mouse over the "007.png" file, the second picture shows the link.

Notice there is NO attachment to course... and there's no "007.png" either. There's no .png at all, in fact, which means your idea to pull PNG files out with CSS is impossible. 

[jared]

I know this is an older question, but wanted to add a bit of intel here.

The answer is yes, if you have (or can get) the Canvas courseID for each course that the CSS is referencing.

Files held in each Canvas course can be referenced from the course's folder structure with the path

file_contents/course%20files/

However, this is the relative path assuming you are starting within the course folder. The full path from the root would be

/courses/123456789/file_contents/course%20files/

Where "123456789" is the current course's courseID. This can be useful when you're working in HTML mode within a Canvas Page, for example:

<img src="/courses/123456789/file_contents/course%20files/images/walrus.jpg" alt="The Walrus and the Carpenter, from Alice Through the Looking-Glass" />

AFAIK there is no way to dynamically get the current courseID with just CSS. You'd have to load the courseID into your CSS dynamically, which is totally possible with Javascript, but that's another topic!