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

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:

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:

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!

Find more posts tagged with

Instructional Designer

Accepted answers

All comments

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.

Chris

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

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.

COURSE_ID/files/FILE_ID/preview') no-repeat center; align-items: center; display: flex; justify-content: center; height: auto; width: auto;">

This is my new Canvas page that I am making on 2025-09-14.

Canvas page -- background image -- text.png

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

Unanswered Questions

Course Analytics not currently reporting all data ?
Has anyone found gaps in their course analytics ? I'm currently seeing missing last view date, last participation date, and participations at overall course level, even though the same data is present at individual week and student level. Am also seeing truncated asset counts ie we are seeing only the global header counts,…
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…
SMS - Ready Tech and aXcelerate
Hi everyone, We’d love to hear from anyone who has experience using ReadyTech or aXcelerate as their SMS integrated with Canvas. How was your experience, and what’s your feedback? We’re currently exploring which option to use and would appreciate your insights. Thanks in advance for your responses!
Issue: Google LTI 1.3 Assignments Not Saving When Edited
Problem Canvas is not persisting the Google LTI 1.3 connection when editing existing assignments. This issue has been confirmed across multiple users. Symptoms * Error message: "Page Error: Something broke unexpectedly. If you have a moment, click here to tell us what happened" * Some users may initially see: "Google…
Built-in Recording Timer
Good afternoon everyone, Is it possible for the built-in timer inside the reply button, when the dialogue box opens, to make it a little more distinct so that it is more easily readable? I love recording and uploading my video responses directly inside the homework assignment. Still, it makes it a tad more difficult when…