cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jaclark7
Community Participant

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

Jump to solution

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)
1 Solution

Accepted Solutions
sharon_kitching
Community Participant

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

View solution in original post

10 Replies
sharon_kitching
Community Participant

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

View solution in original post

Robbie_Grant
Community Coach
Community Coach

 @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

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.

vanvleck
Community Participant

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
Community Participant

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
Community Participant

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

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>

kleeberfr
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 

mehall
Community Member

@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! 🙂