[Rich Content Editor] HTML code "Background: url ()" is altered on copy

[vlgutier4]

In learning from @DrNufer 's How to Canvas site, I've been working on adding background images to pages (https://www.howtocanvas.com/create-amazing-pages-in-canvas/background-css). Unfortunately, it appears that the code if being altered on copy, causing the image not to display.

Original code: <div style="background: url('/courses/96878/files/20862122/preview') no-repeat center / cover; align-items: center; display: flex; justify-content: center; height: auto; width: auto;"> 

Code altered on copy: <div style="background: url('$CANVAS_COURSE_REFERENCE$/file_ref/g8c59b4aa41d58a7470e59b26a7c3ac0d/preview') no-repeat center / cover; align-items: center; display: flex; justify-content: center; height: auto; width: auto;">

I'm hoping it's something in the way I wrote the code. Any help is appreciated!

[james_whalley]

@vlgutier4 That's a real bummer. While I haven't used this code before, my instinct is that this has something to do with how you added the image to the RCE. Are you adding the image and then messing with the code or trying to code it in from the start? I imagine that adding the image first should likely work.

You are storing the image in the course and then the image is being copied over to the new course as well, correct? What form of copying are you using to get content course to course? I know some people copy and past content over, which frequently breaks references and links.

[vlgutier4]

Thank you for the response. The images is stored in Files and hard coded into the RCE. I found another thread in Community noting the same issue: https://community.canvaslms.com/t5/Canvas-Ideas/Rich-Content-Editor-Improve-RCE-to-include-ability-t...

[chriscas]

Hi @vlgutier4,

Have you tried putting the full url to the image in the original course, not just the relative path (https://school.instructure.com/courses/96878/files/20862122/preview instead of just /courses/96878/files/20862122/preview')?  There are a lot of areas of Canvas that don't seem to like relative/path URLs and will straight up reject them.  Since you're manually editing HTML, you're not getting prompted about this, but may be seeing the resulting issue because of it.  I don't know for sure if this will fix everything, but it's something you can at least try.

-Chris

[vlgutier4]

Hi chriscas - Thanks for the suggestion. I tried this and other changes and had a friend verify as well. Nothing but entering the information manually in the copied section worked. 

[dbrace]

I have used @DrNufer's code from https://www.howtocanvas.com/create-amazing-pages-in-canvas/background-css to successfully use an image in a Canvas course. Please try this code and you will get a result that is similar to what is in the screenshot provided below.

<div style="background: url('/courses/COURSE_ID/files/FILE_ID/preview') no-repeat center; align-items: center; display: flex; justify-content: center; height: auto; width: auto;">
<div style="background-color: rgba(255, 255, 255, 0.4); padding: 20px; margin: 30px;">
<p style="text-align: center;"><span style="font-size: 14pt;"><strong>This is my new Canvas page that I am making on 2025-09-14.</strong></span></p>
</div>
</div>

After you get that result, you would be able to use other code that @DrNufer provides.

Something to note and I tried this: When copying/import from one course together another (and I tried the different ways that Canvas supports), you will need to manually change the source for where the image is located because the Canvas copy/import process does not automatically change the source because it was manually added.

-Doug

 

[vlgutier4 · Accepted solution]

Hi dbrace - Thank you for your response.  I also determined that the only solution is to change the course id and image id after copy seems to work, unfortunately. There is another thread in Community noting the same issue: https://community.canvaslms.com/t5/Canvas-Ideas/Rich-Content-Editor-Improve-RCE-to-include-ability-t...