Add an image to your header to give your site a personalized look. In this guide, you will learn how to add an image to your site’s header.
In this guide
Have a question?
Ask our AI assistantFollow these steps to upload a header image.
Your site’s theme type determines which instructions to follow. Go to Appearance in your site’s dashboard: if you see Editor, follow the Site Editor tab instructions. Otherwise, follow the Customizer tab instructions.
Select the appropriate tab for your theme type:
A header typically consists of blocks (such as the Site Title, Site Logo, and Navigation Menu) contained within a single Group block. The most common way to add an image to your header is to set a background image on that group.
Follow these steps to add an image to your site’s header:
- Visit your site’s dashboard.
- Navigate to Appearance → Editor.
- Click the homepage preview to start editing.
- Open List View, then select the Group block containing your header content (identified by the icon of two overlapping squares). If your header content is not within a Group block, add it to a group by clicking the ⋮ button and selecting Group so that your header is contained within a group:
- In the block settings sidebar, find the Background image section and add an image. Upload one from your computer or choose one from your media library.
- Click the Save button to save your changes.
If your header change appears on some pages but not others, different pages on your site may use different header template parts. See Create different headers and footers for different pages to control which header each page uses.
For gradients, removing the image, and other options, see Add a background image or gradient. To use a solid background color instead, see Style your site’s header.
For a standalone banner image above or below your header content, add a Cover block to your header. See Add a banner to your site for the steps.
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 is cropped or zoomed differently than you want, adjust the focal point or size—see Add a background image or gradient.
- 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. Images with a 16:9 ratio—such as 1920 × 1080 or 1280 × 720 pixels—usually work well.
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.
