Community

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

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
sharon_kitching
Community Member

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

12 Replies
sharon_kitching
Community Member

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.

0 Kudos

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>

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

0 Kudos

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>

 

 

0 Kudos
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

0 Kudos
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

0 Kudos

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

0 Kudos
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

kleeberfr
New 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 

I too am having this same issue.

0 Kudos
rkolbe
New Member

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

0 Kudos