cancel
Showing results for 
Search instead for 
Did you mean: 
Surveyor

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

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?

Tags (2)
8 Replies
Adventurer

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. 

screen capture of background image

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.

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

Background image added to page to help theme our content.

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>

Community Coach
Community Coach

jaclark7@mccneb.edu,

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

Explorer

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

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

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

Community Member

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