How do I add a background image to the Home Page feature area?

[jaclark7]

How do I add a background image to the Home Page feature area (the area below the header and above the search bar)?  I've called to it in the CSS code, but how do I upload it to the Canvas server so the code can call it?

[sharon_kitching · Accepted solution]

Try this

<h2 style="color: #686868; position: absolute; padding: 1rem; z-index: 9999; background: #ECECEC; margin-top: 0rem;"><span style="color: #333333;">TITLE HERE</span></h2>
<div>
<div>
<div style="width: 100%; overflow: hidden;"><img src="https://canvas.sydney.edu.au/courses/12079/files/4107150/preview" alt="" width="1146" height="229" data-api-endpoint="https://canvas.sydney.edu.au/api/v1/courses/12079/files/4107150" data-api-returntype="File" data-decorative="true" /></div>
</div>
<div>

Gives you this - you can move as you see fit. 

[stephen_wilson1]

Yes, it works!  Thank you.  I have discovered however that Canvas likes to mess with my tags when adding html code.  It took several tries to get some links to show up over my background pic.  Canvas kept adding ending tags in unexpected places.

[rkolbe]

Nice work Sharon, Thanks!

I made a washed out (semi transparent) background image and added it to a page by just putting the new image URL in the same format as yours. I stripped out your "New title" colours and formatting and voila!!!
NOTE: I did make the graphic taller with blank space so I did not have to fiddle with scrolling bars. I have dropped my amended code below the screenshot.

Thanks again,

Rolfe

Replace HTML of page with the following.

<div style="position: absolute; padding: 1rem; z-index: 9999; margin-top: 0rem;">
<p>

Normal content here

</p>
</div>
<div style="width: 100%; overflow: hidden;"><img src="https://wenona.instructure.com/courses/1877/files/199175/preview" alt="" width="800" height="1200" data-api-endpoint="https://wenona.instructure.com/api/v1/courses/1877/files/199175" data-api-returntype="File" data-decorative="true" /></div>

[mehall]

@rkolbe Thank you so much for including this! I had a lot of trouble finding a resource to help me use an image as a BACKGROUND for a Canvas page - most of what I found had to do with linking the images. This is life-changing! 🙂

[MrsLackey]

My image is showing as a broken link.  Here's the coding that I have, what do I have that's not working correctly? @rkolbe 

<div style="position: absolute; padding: 1rem; z-index: 9999; margin-top: 0rem;">
<p>Normal content here</p>
</div>
<div style="width: 100%; overflow: hidden;"><img src="https://bibb.instructure.com/courses/71943/files/folder/course_image?preview=8106654" alt="" width="800" height="1200" data-api-endpoint="https://bibb.instructure.com/courses/71943/files/folder/course_image?preview=8106654" data-api-returntype="File" data-decorative="true" /></div>

[ToddMesewicz]

Hi MrsLackey,

Have you tried uploading the file to the course and constructing your path like this, it seems to work for me:

<div style="position: absolute; padding: 1rem; z-index: 9999; margin-top: 0rem;">
<p>Normal content here</p>
</div>

<div style="width: 100%; overflow: hidden;"><img role="presentation" src="/courses/{{courseid}}/files/{{file_id}}/preview" alt="" width="800" height="1200" data-api-endpoint="/courses/{{courseid}}/files/{{file_id}}/" data-api-returntype="File" />
</div>

Get the file_id from the files area and clicking preview on the image.
The course_id should be the unique course id  in the url

[MarkRosenberg]

Quick question? Is there a way to make the background image be the size of a page, kinda like using an image for a background color?

[Robbie_Grant]

 @jaclark7 ,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie

[vanvleck]

Hi, All! (I'm a newbie here so please pardon my bumbling...)

I am also working on the images/graphics for my Canvas courses so this question was perfect. Then "EEEEKKK!" How much HTML do we need to do? In another blog, the author mentioned creating images in PowerPoint (save as JPG or PNG). Are these substitutes? Or do I need to become a programmer in addition to everything else?

TIA.

Va Nee

[jaclark7]

Hello!

Are you trying to add images to the Canvas LMS course or on the Canvas Catalog?  I was able to add images to the Catalog and course listings with minimal HTML knowledge. 

Jordan Clark

[vanvleck]

Canvas LMS course. I got it worked out. Thanks for response!

I have imported content from my old Bb course --but it feels like moving boxes all got dumped-out and mixed up--and I have to reorganize into a new space. I know all the "stuff" is there but it is going to take a fair amount of work to make it usable.

Va Nee

[kleeberfr]

Hello, I have tried to put an image as a background on a page, but I have not been successful. The image appears as if it were a broken link .... a small clipped image .. I have already tested all the codes and I am not successful, any suggestions?

Thanks 

Kleeber 

[malonebm]

I too am having this same issue.

[rkolbe]

Sorry i feel bad that I missed your question!. It is only just as I need to try and do it for a new course that I ran into the same problems.

It is a bit challenging getting the link!!!

To get the link I embedded the image in a page and then right clicked on it and choose copy image link. Then I had the key part that I could use in the code ie the bit like this /courses/3359/files/  

I hope this helps.

Kind regards,

Rolfe