The community-posted solution for designing pages with background images (using RCE tools) is not ideal because it's not responsive. https://community.canvaslms.com/t5/Canvas-Question-Forum/How-do-I-add-a-background-image-to-the-Home... My solution for a responsive design requires working manually in the HTML editor of the RCE with the following code: (see source code)
This is a heading title of text overlaying an image
This is smaller text
While this works for individual courses, this code gets broken in use-cases when Blueprinting courses and when copying/importing course content. The area that breaks is on the first line where an associated course page, for example, updates the code in this way: "url('$CANVAS_COURSE_REFERENCE$/file_ref/mastercourse_10576_154_590b1a79c1dba005c9db242f244dc887/preview') This results in a 404 error. A support agent described the cause of the error (case# 10451987) was based on me hard-linking instead of using the available RCE tools.
My "hard-linking" approach does not include the additional attributes like data-api-endpoint and data-api-returntype, so I'm guessing this may be why "Canvas" can't fully resolve the URL path for BP-associated pages and/or imported pages. My code provides a better solution for responsive designs and intuitive code encapsulation. Having a fix in place to incorporate responsive background images using the RCE tools would be excellent - or providing documentation of what attributes in a CSS style block would help the code work for BP pages and imported courses.
