The Header is the upper area of your WordPress website and is one of the first elements visitors see. Depending on the website, it may contain your logo, the main navigation, a background image, contact details, or a button, for example.
If you Change header image in WordPress you want, but it isn't available under the exact same menu item on every website. The exact path depends on which theme you are using and how your website's header is structured.
In classic WordPress themes, customization is often done via the Customizer. Modern block themes use the Website Editor. Other themes have their own header settings, and for websites using Elementor or another page builder, the header may have been created entirely outside the normal WordPress theme settings.
In this guide, we will show you how to find out which method your website uses and how to safely customize your logo, header image, and other elements in the header area.
Briefly explained: If you are under Design the menu item Customizer found, your theme might be adjusted via it. With a block theme, you will usually find instead Design → Editor. If your website uses a page builder or a theme with its own header builder, you must edit the header there.
What is the header of a WordPress website? #
A header is normally the upper area of a website. It frequently appears on all or at least many pages in the same or a similar form.
A typical website header can contain the following elements:
- Logo
- Website Name
- Main navigation
- Header image or background image
- Search function
- Contact information
- Social media links
- Call-to-Action Button
- Language selection
- WooCommerce Cart
Which elements are present is mainly determined by your theme and the individual design of your website.
Header, header image and featured image are not the same #
Before you change anything, you should distinguish which image you actually mean.
A Header image or rather, the header background image belongs to the upper design area of the website. A Logo is usually a separate element within the header.
The Featured image On the other hand, a featured image belongs to a specific post or page. Depending on the theme, this image may also be displayed large at the top of the page, but technically it is not necessarily the actual header image.
Common misconception: If you replace a page's featured image and the large image at the top changes, you likely haven't changed a global header image. In this case, your theme is using the featured image as the title or hero image for that specific page.
Why does header management not look the same on every WordPress website? #
WordPress provides the technical foundation, but the active theme determines a large part of the presentation.
In the course of WordPress development, various systems for designing themes have also emerged.
Today, you will mainly encounter the following variants:
- classic themes with WordPress Customizer
- Block Themes with website editor
- Themes with custom header builder
- Page Builder how Elementor with custom theme or header functions
Therefore, a guide with the blanket statement „Click on Design → Customizer → Header Image“ would simply be wrong for many current WordPress websites.
First figure out which theme is active #
Before you look for the header settings, you should know which WordPress theme your website uses.
Check active theme #
- Log in to the WordPress admin area.
- Open Design → Themes.
- Search for the theme that as „Active“ is marked.
- Note the name of the theme.
If you don't know how to open the WordPress admin area yet, you can find the complete guide at WordPress Login: How to log in to the admin area.
Method 1: Change the header in a classic WordPress theme #
Many classic themes use the WordPress Customizer. If your theme supports this feature, you will usually find it under Design the corresponding menu item.
Open:
Design → Customizer
The available settings depend entirely on the theme being used.
Possible areas could be, for example:
- Website information
- Header
- Header image
- Header Media
- Logo
- Layout
- Menus
Not every classic theme offers all of these options.
Replace the header image via the Customizer #
If your theme provides a section for the header image in the customizer, you can usually replace an existing image or upload a new one there.
Change header image in the customizer #
- Open Design → Customizer.
- Search for Header, Header image or a similarly named setting.
- Click on the existing image or on the function to add or change an image.
- Select an image from the WordPress media library or upload a new image.
- Crop the image as needed according to the theme specifications.
- Check the preview.
- Save or publish the change.
The exact names of the buttons may vary slightly depending on the theme and WordPress version.
Why can't I find a customizer under Appearance? #
If under Design if no normal customizer is displayed, that is not automatically an error.
You may be using a modern Block Theme. Such themes are designed using the WordPress site editor.
In this case, you will normally find:
Design → Editor
Instead of configuring individual theme areas via the classic Customizer, you can edit templates and template parts there using WordPress blocks.
Method 2: Edit the header using the WordPress Site Editor #
In a block theme, the header is usually a so-called Template part.
First open:
Design → Editor
Depending on your WordPress version and theme, you can edit the design of your website, templates, and template parts there.
Open the header or a template that contains the header.
You can then edit the blocks used in it within the editor.
A modern WordPress header can consist of the following blocks, for example:
- Website Logo
- Website Title
- Navigation
- Image
- Cover
- Group
- Buttons
- Social Icons
Change header image in a block theme #
If the visible header image goes over a Image block has been integrated, select this block and replace the image via its toolbar or settings.
Was the background with a Cover Block created, you must change the background image of this block instead.
This is an important difference: With block themes, there isn't necessarily a central setting named „Header Image“. The image can simply be part of the header layout.
Tip: If you cannot identify which element is generating the image in the website editor, open the editor's list view. There you can see the structure of the blocks used and more easily identify image, cover, or group blocks.
Changes to the global header affect multiple pages #
When editing a header, you must keep in mind that it is often a globally used website section acts.
For example, if you change the logo or an image in the global header, the change can automatically appear on all pages that use this header.
Therefore, check before saving whether you really want to edit the global header or just the title image of a single page.
Method 3: Theme with its own header builder #
Some WordPress themes provide their own tools for header design.
The exact operation differs depending on the theme. Possible designations include, for example:
- Header Builder
- Theme Options
- Theme Settings
- Header Layout
- Site Builder
In this case, you should use the settings provided by the theme and not try to change the header via a menu item intended for a different theme.
When you change the theme, the available header settings can therefore also change completely.
Method 4: Edit header with Elementor #
If your WordPress website with Elementor created, a distinction must be made between normal page content and a global header created with Elementor.
Using the appropriate Elementor features, a header can be created as a separate template and assigned to specific areas of the website.
In such a case, it is useless to look for the header image in the normal WordPress Customizer if the entire visible header is actually generated by Elementor.
Open the corresponding Elementor templates or the Theme Builder instead and check which header template is active.
Important: Do not edit the theme header and a header created with a page builder at the same time unless you know which one is actually being rendered. Otherwise, you might modify settings that are not visible on the website at all.
Change logo in WordPress #
When you actually don't want the header image, but the Logo want to replace, the method also depends on the theme.
With classic themes, you will often find the logo setting in the Customizer under an area such as:
Website information
or in the header settings of the theme.
With a block theme, the block is often Website Logo used. You can select this in the website editor and replace the stored logo.
With themes or page builders that have their own header system, the logo may be located directly within the header created there.
Do not confuse the logo and the header image #
The logo usually represents the brand or the company. The header image, on the other hand, is a design element and can show, for example, a landscape, a product, an illustration, or a background.
Technically, both elements are therefore often managed separately.
If you only want to change your company logo, you shouldn't replace the entire header background image.
What image size should a WordPress header image be? #
There is no universal optimal pixel size for WordPress header images.
The required dimensions depend, among other things, on:
- the theme used
- the page layout
- the height of the header
- the maximum content width
- the display on mobile devices
- the aspect ratio used
- the type of image
For example, a theme can use a very wide and shallow header image, while another website displays a large hero image across the entire width of the screen.
Therefore, base your actions first on the recommendations or the layout of your theme.
Do not just upload huge images #
A common problem is unnecessarily large image files.
A modern camera or smartphone can produce images several thousand pixels wide and several megabytes in file size. Using such an original image unchecked as a website header is usually not a good idea.
A header image should only be as large as necessary for its actual display.
Unnecessarily large files can:
- increase the loading time
- transfer more data
- consume unnecessary bandwidth on mobile devices
- worsen the perceived speed of the website
Large images in the visible upper page area in particular can be especially relevant for performance.
Which file format is suitable for header images? #
Which image format makes sense depends on the subject matter and the required range of functions.
Typical formats are:
- JPEG/JPG: suitable for photographs and subjects with many color gradations
- PNG: useful if transparency is needed or certain graphics are available accordingly
- WebP: modern web format with good compression for many image types
- AVIF: modern, efficient image format, provided it is reasonably supported in your specific workflow
- SVG: particularly suitable for vector graphics and logos, but must be used with caution for security reasons
For a photographic header image, a huge PNG is usually not a sensible choice. For a cutout logo with a transparent background, however, PNG can be appropriate.
Check header image for desktop and smartphone #
A header image that looks perfect on a large desktop monitor can be displayed problematically on a smartphone.
In responsive layouts, the available width changes significantly. Background images may therefore be cropped depending on the CSS settings.
Check after every change at least:
- Desktop view
- Tablet view
- Smartphone display
Important image components should not be located so close to the edge that they get cut off in a narrower display.
Do not embed text directly into the header image #
If a heading, an offer, or a button is to appear in the header, you should normally place this text as real HTML content above or in front of the image rather than embedding it directly into the image file.
This has several advantages:
- Text remains easier to read on different screen sizes
- Content can be changed more easily
- Search engines can capture the text as content
- Screen readers can process the text
- Translations are much simpler
- Buttons remain real clickable controls
Therefore, a header image should primarily be a visual element and not serve as a replacement for important website content.
How to properly use alt text for header images #
Whether an image requires alt text and what it should contain depends on its function.
If the image conveys important information, a meaningful alternative text should be provided.
If, on the other hand, the header image is purely decorative and conveys no additional information, it should not be unnecessarily provided with a description from an accessibility perspective. Decorative images should be integrated in such a way that assistive technologies can skip them.
An alt text is also not the place for a list of SEO keywords.
Example: A photo of a specific corporate building may require a descriptive alt text if the subject matter is relevant to the content. An abstract gradient behind an existing H1 heading, on the other hand, usually does not require an additional textual description.
Header image changed, but the old image still appears on the website #
If you have changed and saved the header image but still see the old version, a cache may be the cause.
For example, the image may still be cached by:
- your browser
- a WordPress cache plugin
- server-side caching
- a CDN
- a page builder
Test the website in a private browser window first or perform a full reload.
If the old image still appears, check the cache systems used.
Header image is not displayed on some pages #
If the header image is missing only on certain pages, your website may be using different templates or headers.
This is possible, for example, with:
- a special homepage template
- Blog and archive pages
- WooCommerce pages
- Landing pages
- Elementor templates with different display conditions
- custom WordPress templates
Therefore, first check whether really all pages use the same header.
Header image is cropped #
With wallpapers, it is normal for parts of an image to be cropped depending on the screen aspect ratio.
This happens frequently when the image is scaled to fill the entire available area.
If important parts of the subject disappear, depending on the design used, you can, for example:
- change the position of the background image
- adjust the height of the header area
- use an image with a more suitable aspect ratio
- use a different image for mobile devices
- crop the motif differently before uploading
Which options are available depends on the theme, block, or page builder.
Header image looks blurry #
A blurry header image can occur if the uploaded file is too small for the displayed area.
If, for example, a very small image is enlarged across the entire screen width, there is not enough image information for a sharp display.
Therefore, use a resolution that matches the actual maximum display without unnecessarily uploading huge original files.
Header image causes slow loading times #
A large image in the above-the-fold area of a website can have a significant impact on the perceived loading time.
If your header image is several megabytes in size, you should optimize it.
Check in particular:
- Image dimensions
- File size
- File format
- Compression
- responsive image output
Good image optimization does not try to reduce image quality to a minimum, but rather achieves a reasonable balance between visual quality and file size.
Do not thoughtlessly subject the hero image to lazy loading #
Images that only appear further down a page can often be loaded lazily. This process is called Lazy Loading referred to as.
On the other hand, for a large central header or hero image in the above-the-fold area, delayed loading is not automatically sensible.
If an image that is important for the initial rendering is loaded too late, the perceived loading time can deteriorate.
Performance settings should therefore not be applied according to the principle of „lazy loading for every image“.
Change header menu #
If you want to change not the image, but the navigation in the header, it is the WordPress menu management.
Depending on the theme, this also differs between classic and modern block themes.
Therefore, we cover the complete setup separately in our guide Creating and managing menus in WordPress.
Do not edit the header directly in theme files #
With classic themes, PHP files often exist such as:
header.php
This does not mean, however, that you should directly edit this file for a normal change to the logo or header image.
Direct modifications to the files of a parent theme can be overwritten during a theme update.
Furthermore, even a small error in the PHP code can cause parts of the website to stop working.
Therefore, use the intended theme, WordPress, or page builder functions first.
If actual changes to theme files are necessary, a WordPress Child-Theme often the technically better approach.
Change the theme just because the header can't be easily changed? #
A theme change should not be undertaken lightly.
The theme affects far more than just the header. A change can impact:
- Layout
- Navigation
- Widgets
- Fonts
- Colors
- Templates
- Theme-specific features
- Display of existing content
If you are merely missing a header setting, you should first check what options the existing theme offers.
How to correctly install new themes is explained in our guide on Installing a new WordPress theme.
Check the existing configuration before making major header changes #
For a simple logo change, extensive preparation is usually not required.
However, if you want to redesign the entire header, you should first understand how it was structured.
Check in particular:
- which theme is active
- whether a child theme is used
- whether the header was created via the Customizer
- whether a block theme is used
- whether Elementor or another page builder generates the header
- whether different headers exist for different pages
Only after that should you make major changes.
Change header on a staging or test environment #
When making extensive changes to a production corporate website or online store, it can be useful to first test the new design in a staging environment.
This allows you to control the layout, navigation, and responsive display without visitors seeing an unfinished header while you are editing.
For such work, a cloned WordPress installation can also be helpful. We explain how to copy an existing installation with Softaculous at Clone WordPress with Softaculous.
Common mistakes when changing the WordPress header #
- confuse header image and featured image
- search in the Customizer, even though a block theme is being used
- edit the theme header even though Elementor generates the visible header
- make global changes even though only a single page should be changed
- upload original images that are several megabytes in size
- check the image only on a desktop PC
- integrate important text directly into the image
- Stuffing alt texts with keywords
- Edit theme files directly
- ignore the cache after a change
Note: If you cannot find the header image where another guide describes it, WordPress is not automatically misconfigured. Most likely, your website is simply using a different theme or header system.
When should you contact CURIAWEB support? #
If you, as a CURIAWEB customer, cannot figure out what is generating the header of your WordPress website, you can contact our support.
Please let us know if possible:
- which domain is affected
- which theme you use
- which element you want to change
- whether Elementor or another page builder is installed
- what you have already tried
This makes it much faster to determine whether the header is managed via WordPress, the theme, or a page builder.
Summary #
How you change a header image in WordPress depends on the structure of your website. Classic themes often use the WordPress Customizer, while modern block themes via Design → Editor and the website editor can be adjusted. Themes with their own header builder and page builders like Elementor, in turn, can use completely separate management methods.
Check therefore first under Design → Themes, which theme is active and what actually generates your header. Also, do not confuse the global header image with the logo or the featured image of a single page.
If you also want to change the navigation in the header, you can find the corresponding instructions at Creating and managing menus in WordPress. For changes to the theme code, you should not edit the parent theme directly. We will explain the use of a [child theme] for this later. WordPress Child Themes.
