The ability to create a new community profile is temporarily unavailable. We're on it!

Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Champion

Elementary Theme Course Banner Sizes

I was playing a bit with the banner situation. It appears that if you upload an image in the Course Settings, that image will be used as the banner image in content courses. It auto-crops the center of the image for the course card. So with some experimentation, I have found that 1200 x 200 pixels works very well for the banner. And if you put some stuff right in the center of that size then you get about 350 x 200 pixels to work with. So the banner or hero image or whatever it's called looks like this:


And the corresponding Course Card image looks like this on the dashboard:


Here's a link to the banner I used in Canva if you want to play around with it: 


6 Replies
Community Champion

Side note: It would be AWESOME if we could use SVGs for these images to scale nicely too!

Community Participant

@MattHanes Thank you for figuring this out!


I wonder if there is a way to separate the two images so the course card and banner could be different. I know why the course card is the same as the banner now, but I may not want my course card to have the image from the middle of my banner.

I really like the idea of being able to use a scaleable image!


Nice @MattHanes! Right now the height of that image scales to 25% of the window height up to a max of 400px, so you could go bigger if you wanted, though what you've got looks great. Good thinking on featuring the thing you want on the course card in the center of that banner image. We'll have to look into SVGs...don't know why those wouldn't be allowed.

@rebecca_esplin This is a good idea. It might be a little trickier than you think. There are a lot of advantages to keeping these subjects as backwards-compatible as possible with normal Canvas switching to elementary mode with the flip of a button, or sharing content from a subject to a course, or using Blueprints to create elementary subjects...In other words, having everything "just work." So if something in a subject just doesn't exist in a normal Canvas course (like a banner image vs. a course card image in this case), compatibility can get a little wonky. I'll talk about this in the project update today, because it's an interesting limitation and we may have to shift our thinking at some point.

Ahhh thanks for that info @peytoncraighill . I probably should have thought to inspect the stylesheet...

I'll definitely have to leave some filler space at the top and bottom of the image for low resolution devices like our Chromebook. Centering any text in the middle of the vertical space so that it is still visible on something with a tiny viewport. Our Chromebook resolutions are 1366 x 768 which ain't the greatest. I got lucky though, my template still just barely fit on the CB screen without cutting into the text. 



Community Champion

@peytoncraighill  Is there a reason the banner needs to stay locked at the top of the screen when scrolling in a course? Under Home, it takes up a lot of real estate when home is set to Front Page. When I first open a course, I see my most recent announcement, the banner, the menu tabs and my homepage. The announcement + banner + menu occupies about 2/3s of the page height so most of my page content isn't visible to start. When I scroll, the most recent announcement scrolls off the top, but the banner stays locked. I can see more of my page, but the banner + menu tabs +(manage button in teacher view) still fills close to half the screen. It remains locked at the top under the schedule tab as well, and in the preview I can only see 5 items at a time. Under the Modules tab it does float off the top when I scroll and I can see a more complete view of my modules.

Community Member

There was a change this week. It added a card and banner separately in the elementary view. Had to change my banners to 1132x228px to fix the blurry look.

The card is 262x146px