Upload a header image

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

The theme you use on your site will determine how you can add a header image. Starting from your site’s dasard, 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: Click on Customize and look for the Header Image option, which is available on many themes.

Themes that include the Site Editor offer the most flexibility regarding where and how a header image can be displayed.

Follow these steps to upload a header image.

To follow the correct instructions, you’ll need to know which type of theme your site uses. Go to Appearance in your dasard: if you see Editor, use the Site Editor instructions; 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.

1. Visit your site’s dasard.
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” button to save your changes.

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

1. Visit your site’s dasard.
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.

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 site’s width. You may achieve good success by uploading an image with dimensions in a 16:9 ratio (such as 1920 × 1080 pixels or 1280 × 720 pixels).

To check if your theme has a recommendation for best image dimensions, 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.