background image or watermark on a 'home' page

[vrs07nl]

Does anyone know how to place an image as background to page content - like a watermark or background canvas so can still use all page functions and text over the top of it?

[JACOBSEN_C]

"Themes" is the feature.  Be careful of contrast and accessibility.

• How do I manage themes for an account?
• How do I create a theme for an account using the Theme Editor?

[vrs07nl]

Thanks Clint 

I was looking to watermark  just a home page for a subaccount - not sure themes will be that specific 

i will experiment

thanks 

Nicola 

[vrs07nl]

We have decided the watermark option will not work for us 

anyone now how to add a banner - i think it will involve css and javascript (used to pull in the programme colour background) 

the banner would sit below the green block 

Nicola 

[vrs07nl]

it would still be nice to be able to watermark a single page or course syllabus  - themes option is all or nothing 

we have now gone for a carousel of images rather than just a banner as a solution for our particular need.

[dgrobani]

Perhaps you could use background-image and related CSS properties? If the home page selectors aren't unique, you might be able to use JavaScript to identify a home page then apply the CSS.

[vrs07nl]

Dear Daniel 

thanks for your additional suggestion 

i suspected the solution lay in java script - trying to avoid having to use that as causes problems down the line with copied courses including blueprint ones 

i will let you know how i get on if we get it to work 

Nicola 

[ymanko]

Hello Nicola,

Does this look like what you were asking for?

Just HTML, no JavaScript
Here's the link to the Canvas page:
https://tacomacc.instructure.com/courses/1717903/pages/background-image-demo-3

And here's the code:

<div style="width: 80%;">

<img src="https://tacomacc.instructure.com/courses/1717903/files/107099318/download" alt="Picture: Water Apple Autumn Nature Leaf Windfall" width="100%" height="auto" data-api-endpoint="https://tacomacc.instructure.com/api/v1/courses/1717903/files/107099318" data-api-returntype="File" />
<div style="font-size: 18pt; color: #800080; position: absolute; top: 20%; left: 5%; width: 70%;">Your text here
<p>or another picture</p>
<p><img src="https://tacomacc.instructure.com/courses/1717903/files/107099546/download" alt="Picture: Autumn Leaves" width="30%" height="auto" data-api-endpoint="https://tacomacc.instructure.com/api/v1/courses/1717903/files/107099546" data-api-returntype="File" /></p>
<div style="width: 80%; font-size: 8pt; text-align: left;"><span style="color: #000000;">Image retrieved from https://pxhere.com/en/photo/179443. CC0 Public Domain.</span></div>
</div>
<div style="width: 80%; font-size: 8pt; text-align: left;">Image adapted from "Water Apple Autumn Nature Leaf Windfall," retrieved from https://www.maxpixel.net/Water-Apple-Autumn-Nature-Leaf-Windfall-469573. CC0 Public Domain.</div>
</div>

Sizing and positioning is up to you (may be tricky, as I've found out--especially, with zooming in and out). The 'endpoint' attribute is being added by Canvas automatically.

Yuriy

[gail_macdonald]

I have had this ongoing issue for the past two months with all of my dashboard images disappearing. I was told it was something I had done. I was using pics so have now created my own static image to place on all assessments. This took some time to redo all events. Now I find they have all gone again?'

[vrs07nl]

 @ymanko    have only just seen this

thanks so much for sharing - will try it out shortly

Nicola