Design Your Site

Upload a Header Image

A header image is a picture at the top of your site that gives your site a personalized look and feel. How to add a header image will depend on your theme — this guide will explain each option.

Table of Contents

Your Theme

The theme you use on your site will determine how you can add a header image. Starting from your dashboard, click on Appearance and look for one of these options:

↑ Table of Contents ↑

Upload a Header Image Using the Site Editor

Themes that include the Site Editor have the most flexibility when it comes to where and how you can display a header image. Follow these steps:

  1. Go to Appearance → Editor.
  2. Click on the area where you want to place a header image. This could be just above your site’s title and menu, for example.
  3. Click the + Block Inserter icon to add a new block.
  4. Search for the Cover block and click to add it.
  5. Click Upload to upload the image from your computer or click Select Media to choose an existing image on your site. Video headers are also supported.

For more detailed instructions on using the Cover block settings, see the Cover block guide. If you want to display the header image on certain pages only, see Templates.

↑ Table of Contents ↑

Upload a Header Image Using the Customizer

If your theme uses the Customizer, you can follow these steps:

  1. Go to Appearance → Customize.
  2. There, look for a Header Image option (if it’s not there, this means that your current theme does not support the use of a header image.)
  3. Click Add new image:
    • Under Media Library, you can choose from existing images on your site.
    • Under Upload files, you can upload an image from your computer.
Video Tutorial

↑ Table of Contents ↑

Choosing the Right Image

Choose a .jpeg, .gif, or .png file.

Every site and theme is different, so there’s no specific image size that we can recommend here. You can try different-sized images and view the results on your site. Some common scenarios you might encounter include:

  • If the image is blurry, upload an image with a larger file size.
  • If the image does not span the full width of your site, upload a wider image file.
  • If the image takes a long time to load on your site, upload an image with a smaller file size.
  • If the image includes text that is getting cut off on mobile screens, use a decorative, abstract, or photographic image without text. You can then add text on top of the image in the Cover block.

A header image typically spans most or all of the width of the site. You may see good success by uploading an image with dimensions with a 16:9 ratio (such as 1920 × 1080 pixels or 1280 × 720 pixels.)

Your theme may have a recommendation for the best image dimensions to use. To check this, go to Appearance → Themes and click on Info. Scroll down to the Quick Specs section and look for a recommended header image size, if any.

↑ Table of Contents ↑

Still confused?

Contact support.

Not quite what you're looking for?

Get Help