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.

In this guide

1. Your Theme
2. Upload a Header Image
3. Choosing the Right Image

Your Theme

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

• Editor: You can add a header image using the Group block in the Site Editor.
• Customize: You can click on Customize and look for the Header Image option that is available on many themes.

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

Upload a Header Image

Follow these steps to upload a header image.

To determine which section of this guide to follow, visit your dashboard and check under Appearance on the left side. If you see Editor, use the Site Editor section of this guide. Otherwise, use the WP Admin or Customizer instructions.

Select the appropriate tab for your design interface:

Site EditorCustomizer

In the Site Editor, you can set a background image on a Group block. Group blocks are commonly used in header template parts to group together the various elements of the header. Follow these steps to add a background image to a Group block.

An example of a header image as a background

1. Visit your site’s dashboard.
2. Go to Appearance → Editor.
3. Locate the area where you want to place a header image.
4. Select the Group block that contains the content you want to appear on top of the header image.
   • If there is no Group block, place your desired content inside of one first. See our Group block guide for more.
5. In the Group block toolbar, transform the group to a Cover block.
6. Click on “Select Media” in the Cover block toolbar.
7. 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.
8. Click the “Save” or “Update” button to save your changes.

Slow down or speed up the video using the controls in the lower right corner after clicking Play

On sites with classic themes, you can create drop-down menus using the Customizer by following these steps:

1. Visit your site’s dashboard.
2. Navigate to Appearance → Customize.
3. 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.)
4. Click on the “Add new image” option:
   • Under Media Library, you can choose from existing images on your site.
   • Under Upload files, you can upload an image from your computer.

Choosing the Right Image

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

Every site and theme is different, so there’s no specific image size to 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 Group 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.