--- title: "Add a Header Image and Header Image Inspiration Gallery" description: "Take your course's design and branding to the next level!" url: https://help.teachery.co/en/articles/195-add-a-header-image-and-header-image-inspiration-gallery collection: "Design" updated: 2026-08-01 language: en --- # Add a Header Image and Header Image Inspiration Gallery Take your course's design and branding to the next level! As you'll see in the example header images below, your creativity can run wild and create a lovely branded experience for your course! > **Info:** Recommended size for a full-width header image is 2400x500. Recommended size for a logo is 500x250. Please use PNG or JPG files (GIFs work too). > **Warning:** **Important**: Header images can only be set on the course’s _Overview_ page but will apply to all lessons and sublessons, and other key course pages e.g. the login page. The header image also serves as a way for a customer to return to the Overview page from within any lesson simply by clicking it. You'll see in the examples below with fake "Home" or "Dashboard" buttons, it helps create a branded “back to _Overview_ page” experience. ## 🧐 Header Image versus Preview Image The course header image you add to your course’s _Overview_ page has a lot of visual real estate. Because of that, it's not the best image to use on the _Course Card_ (what you see on your dashboard of courses in your [_Teach_](https://www.teachery.co/teach) page - pictured below - and what customers will see on their [_Learn_](https://www.teachery.co/learn) page) and it's not always the best for social sharing applications like Facebook, Twitter, LinkedIn, etc. Learn more about [preview images](https://help.teachery.co/en/articles/112-setting-your-social-share-image-or-changing-the-course-card-preview-image.md) here. ![](https://staticfiles.gleap.io/ghelparticle/S9eNvFFmcYHJFPSra3guK01ExQNRXC6wmFQNAWFVv3okbweKhtlKP1X4dwLiW0EbYgCdSOPj6t3.png) ## 🖼 Header Image alignment options for a logo Admittedly, our header image feature is best suited for a nice, wide image that creates an immersive experience for your course customer. But, if you want to add a logo only, you absolutely can do that and you can set the alignment to left, centered (our recommendation), or right. ![](https://staticfiles.gleap.io/ghelparticle/Bzl3FSxnnhQAJoxfSeyMJlazQRWGSWxkEQ5uq31EjOBAAbadJ7VMGigR3mkfS8SX9bO735euBzx.gif) ### Logo Recommendation If you are **only** using a logo, we would still recommend creating it within a wide aspect ratio image (2400px wide by 500px tall). This will ensure you can size the logo perfectly to your liking AND control the height of the logo. Here's an example from a Teachery user who has their logo placed within a wide image (you can't even tell, but it makes sizing the logo much easer): ![](https://staticfiles.gleap.io/ghelparticle/L70i3O0tiThg6Iipj4vB7yrhR8vqouVPhfySKllJXiZdjLeZasHGCvArx2k52VKn6FT3S1QhumP.jpeg) ## ↔ Adjusting the Header Image width There are two different width options you can choose for a header image: - Container - This setting goes to edge to edge with your course page. - Full-Width - This setting will fill 100% of the browser window. ![](https://staticfiles.gleap.io/ghelparticle/x0pXZjUEKl1XQ8sYYNBL0NibmGXO3TK3XJfjQm2PFbQMw9ojHOY0uOnXgpeC9CMXG7Jx1nXdp89.gif) Here's the Container version (note the white space to the left and right of the image): ![](https://staticfiles.gleap.io/ghelparticle/MHahTy05MXZ3D4vk7mJt6NsdFgN8pgbD6rQj0UThMjeYLp7vH5RASa4XDw7pwdDJQSISCW2RAwq.jpg) Here's the Full-Width version: ![](https://staticfiles.gleap.io/ghelparticle/8YGN3xD0r7AJvA0STUYV8p5URGGWGEWwYTuHmKvW9ei8fz6FhelG0K5GXP0XdhkRZJpcQjijPhO.jpg) ## 🧘‍♀ Header Image examples We wanted to share a handful of examples to show you just how imaginative and awesome your header images can look in your course(s). The examples below can be created in your design tool of choice (Canva, Photoshop, Affinity, etc). ![](https://staticfiles.gleap.io/ghelparticle/HixPHPevLglICKi3efl6vsbbnAuyC8tVwx2Uno5gfUaEzhSzZ9xMdumEqRP3UoM80Tqx5bcEUo5.png)![](https://staticfiles.gleap.io/ghelparticle/0IEK7qDMwqXt3LbSUPenm7RoIgPtVow5SyxWkwfbQznIdMcdQ5LOEtuuia91TLPTRyxPRDR7XJF.png)![](https://staticfiles.gleap.io/ghelparticle/u2jCkNnZWdnZTaJIo7lyjihFWyIIXfcOvZfqM5kqNBxbWR4o4IOf0n15skI0x8V5xrdT4hewzzj.png)![](https://staticfiles.gleap.io/ghelparticle/Qfq7AfCcGTR4ERXAjJ7NMXGJNMI6q8y3hjm7nztfl1dySSObVZynw5FEuZvZAPNH5eQbaGv22yZ.png)![](https://staticfiles.gleap.io/ghelparticle/RTYgfpgCVAhxbz9xkrurQvAI0IQIrQrokg9wVfclbPFUvJCxZuqoOOTvoy3GDGzq7WDG10qVeJO.png)![](https://staticfiles.gleap.io/ghelparticle/K1zMQCuK9fCMV1flRn0haTeQYGudFGVWYvpm4dadTcVrXwVzsJ65fjHywrp7WQDIMEr9uRpo020.png)![](https://staticfiles.gleap.io/ghelparticle/rsrFX5ZFBF7bpykl7bPkq3glG4S2GY5lteXLH4lrECKlarKP9pwW7KyBQDvLvama4epgvPvOi33.png)![](https://staticfiles.gleap.io/ghelparticle/pVhqznJhPily3zacxzy1tNJUQcvhlM24ua9EK85SZUzkmaZ5LgnJPMNcgfSagqEI0RJTl3HdhSi.png) ## 🏠 Header Image examples with fake buttons As mentioned earlier in this article, when you customer clicks the header image while viewing any page within your course, they will be taken back to the Overview page. Many users have designed fake buttons that say "Back to Overview" or "Dashboard" or "Home" in their header images. We think this is very smart and fun! Hope these inspire your next design... ![](https://staticfiles.gleap.io/ghelparticle/WYmx5wbak1RsP9jSIAMEROF2zfzZtjA5hGAebTITEwVMWXunXEbFLJvVkrjbn3LTPnU0Ea124sN.png)![](https://staticfiles.gleap.io/ghelparticle/4e33KRD39K0Tr7juQExcTlnWkMQopCXbevHXzr0t5CvrGrCLAIRZlfKDCeC6RLP7uQrMam0dVtG.png)![](https://staticfiles.gleap.io/ghelparticle/VOOWSD7PGCBjMdM5CovqPgRbrHESFiY2HFCDGy5r226PGrDG8gnXnpGROGtNI0iMmAXbKP358uZ.png)![](https://staticfiles.gleap.io/ghelparticle/iFwTcMvYrAbf0L16gBkAphtnubapfFUdWXodWxqecEiOmf4eHyRvHaUzsE4nWG5nxVBoLzrsbft.png)![](https://staticfiles.gleap.io/ghelparticle/zZgJhXBsSqblHPf6B83y46arkEWKxb2G6pQBhBiQVwH9zFjQaIrjjDH89c1a0IzKdNpxILhii8t.png)![](https://staticfiles.gleap.io/ghelparticle/AlWuOQ06LN75sLXHkwhfH9oGjVQ7IPZwphI7yKjm6wv63x4jz689CL5zp63JZMcErQSuvbmCWYP.png)![](https://staticfiles.gleap.io/ghelparticle/W5cGX1iFd8nUGOQU841LB4SaQfqDUUmO0ZLmejZrEjLMQ1W38u12orbyZznkNl113PbmRUNJjj3.png)![](https://staticfiles.gleap.io/ghelparticle/RlIin2nWsOMrl82hamtmDH4Mm8EkpLKb5WceyOhIFyOYmfTocYDp2NfMQrJgx10he7ZEnnC7cZ9.png) ## 🗑 Delete or replace your Header Image This one is easy! Just click that trash can icon and you can choose to upload a new header image or you can delete it completely and NO image will be shown on your course at all.