Showing results for 
Search instead for 
Did you mean: 
Community Champion

Banner Aspect Ratio

Is there a recommended aspect ratio for the banner image? I seeing that the banner was updated so that compresses and doesn't take up as musch of the page when you scroll down, but it's resizing in all sorts of different ways when I scroll down depending on the width of my browser. I'd like to get our banners set to a way that scrolling just shows the gradiated bar with the course title, is there a ratio that'll do that? Or is there a ratio that will keep the banner width and height proportional so that the top/bottom or the sides are not getting cutoff like in this screencast. That banner is 1200 x 150. I know Matt Hanes had previously suggested 1200x200 but we were seeing the same behavior using that ratio.  

Labels (3)
0 Kudos
3 Replies
Community Member

Below, I am adding a picture of a course's home screen. The large, blurry image at the top of the screen is actually coming from the course card. I do not see the code in page's raw text file to eliminate the large blurry image at the top of the screen. I was told this is a CSS style sheet and there is nothing that can be done to remove the image. I hoping that was incorrect feedback. (The course's banner is the blue Summer Success image.) Thank you!


elementary canvas.JPG


Community Champion

@BeckyH the course card and the banner are currently the same image. @MattHanes shared a previous post with recommended sizes and centering ( We're still finding the images resize in an odd way, and today I found that the banner image is jumpy at the top of the Grades page and the Resources page when I scroll down. Here's a screencast.

Community Team
Community Team

Good news in the meantime—Our engineering team is planning to address Dashboard cards and making them easier to manage in courses. That update should happen in the next few weeks.