This is a question that comes up very often during my OPEN HOUR - LIVE SUPPORT* sessions or in an email from many fellow Teachable school owners.
First, let me point out that there are two types of pages that needs to have a background image: your Homepage and your Sales Pages. It's actually called a 'Hero Header' in Teachable. The name of the block type that includes your background image is 'Course Hero Header', and it can be placed in different places on your sales page, or it can be used multiple times on a page. Please see the screenshot below.
Teachable's recommended size is 1440x780 px. However, I try to use a 1920x1080 px size image (which is almost the same aspect ratio), to be on the safe side for today's ever-increasing screen sizes. Try not to use anything smaller than what Teachable recommends because the last thing you would want is a pixelated image displayed on your sales page.
So far so good, right? Here is the part where it gets complicated. Even though you upload an image precisely as Teachable recommends, you can never guarantee how it is going to look on the various screen sizes that your visitors are going to have. This is called responsive web design, and it's a good thing actually. Please read on...
The first thing to consider when choosing your hero header: No text on the image! If you disagree, I know where you are coming from. Back in the days when we used Microsoft Frontpage to design a website that was how we used to do it-but not anymore. Why? Because, half of the internet population was not using a smartphone with a tiny screen back then. (Tiny- compared to a computer screen.)
With the help of responsive web design, the text that will go over the image will be adjusted automatically to the screen size of the visitor. Whether it is a smartphone or a tablet, your text will still be large enough to be readable.
When choosing your hero header, try to have the essential visual-elements close to the center of your image since it will be truncated according to the user's screen size. That is also why you shouldn't have text embedded in the image because that might get truncated too. The final size of your hero header's visible area will be determined by the length of your course title/subtitle and also whether you have set up a price so that the enroll button is there. These elements are automatically placed on your hero header.
Below you will see how the very the same Teachable homepage looks on an iPhone, iPad and MacBook Air.
It is also possible to adjust the displayed area of your background image by tweaking the padding (empty space) above and below the title/subtitle, and the enroll buttons by using custom CSS code — something I do on a regular basis while I work on Teachable schools.
I will write another blog post to discuss the best practices for your logo in your Teachable school. Until then, keep up the good work and don't forget to sign up for my mailing list.
*OPEN HOUR - LIVE SUPPORT is a one-hour online meeting if you need to pick my brain as a Teachable Expert. I am ready to share the experience that I gained through all these years on curriculum design, content creation, landing/sales pages, as well as marketing and promotion for online teaching businesses specifically on the Teachable platform. Click here to learn more and sign up for a consulting session.