BLACK FRIDAY SALE: Get 50% Off On Any UNLIMITED DOWNLOADS Plan! Use Code "blackfriday" At Checkout


Search for a plugin or theme

Where to Find Free Images to WordPress Header

You are currently viewing Where to Find Free Images to WordPress Header

I’m sure you heard before that one image is worth a thousand words.

That is correct, a beautiful image can deliver the right message way better than just plain text.

In this article, I will show you where to get the best images for your WordPress header.

Why Use a Header Image

In most cases, there are two main reasons why to set a header image (or a hero section image). The first reason is to grab the visitors’ attention, and the second reason is to encourage them to act.

A good image can definitely make the difference between a bad converting website and a good one.

Take a look at the SnowboardAddiction website for example. The hero section is just a big image with a call to action button at the bottom.

Header image example

When you land on their page you know exactly what to click on, there is a big sale and you better jump into it before it’s over.

Now that you know why images are so important for your website, I would like to show you where to find them.

Images for WordPress Header

In order to use any image for any part of your website, the image MUST be royalty-free and not copywriter protected.

Royalty-free images mean that you have, or bought the rights to use the images.

Searching for the right image and find it on Google does not give you the right to use it. If you decided to use it anyway, you’re exposing yourself to getting sued by the image’ owner and that should be avoided by all means.

What you just read shouldn’t make you lose hope, there are many royalty-free images websites that will let you download beautiful high-resolution quality images for totally free or for a small fee.

Royalty-free images (free)

Here is a great list of websites where you can download images for your WordPress website for totally free.

To download the header’s image. navigate to Pexels website and search for your desired image. In our example, I’ll look for snow.

Search for an image

Once searched, you’ll have many photos to choose from. Navigate between them all and enter the photo that you would like to display on your website.

Browse between photos

Last, click on the arrow next to the download button to choose the right dimension. Please note that any size larger than medium will use a lot of sources and will slow down the loading speed of your website. Therefore, the recommended size for a header is medium.

Download the image

If you couldn’t find the right image and you’re looking for more options, check the additional websites listed below.

Royalty-free images (paid)

Here is a great list of websites where you can download images for your WordPress website for a small fee.

Download images from paid websites is a similar process to the one above.

Search for your desired image, pay and download it to your computer.

shutterstock example

Shutterstock is running a great promotion now where you can get 10 images for totally free.

Once you downloaded the right image to your website’s header, move forward display it to the world.

Add the Image to the Header

After we downloaded the right image for our website, it’s a good time to upload the image to our WordPress website and add it to the header.

In this section, I’ll show you how to add the image to the header using a page builder like Elementor and also straight into the header.php file.

Add an image using a page builder

If you built your website with a page builder such as Elementor, you’re in luck.

Elementor or Divi is super easy to use and they are saving you time dealing with core files.

Add images in Elementor

If you are using Elementor as your page builder, follow the steps below.

Navigate to your header template under the Templates tab and click on Edit With Elementor.

Edit website header template with elementor

Inside the Elementor editor screen, drag the image widget to the desired location and choose the royalty-free image you just downloaded earlier.

Elementor add an image widget

After selecting the image, make sure to style the widget as you wish and click publish when you have done.

Add images in Divi

To add an image to a header with Divi, follow the steps below.

Edit your header template by navigating to Divi -> Theme Builder -> Global header.

Edit global header with divi

Then, add an image widget and select your desired image.

Add header image with divi

Make sure to style the widget and click save when done.

Add an image to the Header.php file

Modifying WordPress core files is not recommended and should be avoided. However, if you still would like to add an image to the header.php file, this section will show you exactly how to do it.

We highly recommend you backup your website prior to modifying the files and only applying the changes to the child theme.

From your WordPress dashboard, navigate to Appearance -> Theme Editor and click on the header.php file from the list on the right.

header php file

Now, you’ll need to decide on the location where you would like to display the image.

Match the HTML element class of the DOM to the one inside the PHP file.

For example, if you would like to add an image just before the inner section of the header, inspect the DOM element, and find the desired class.

In the photo below we would like to add an image just before the header-inner inner section.

Get the header class

After finding the right class, we will go back and look for it in the header.php file and paste the code below:

<img src="image-url-goes-here">

Make sure to replace the ‘image-url-goes-here’ text with the actual URL of the image.

Add an image to php file

Then, just click Save changes and revisit your website to make sure the image is where you intended it to be.

Add a background image with a CSS rule

Often we would like to add a background image to a section and not to add it as a stand-alone element.

We can definitely add a background image to any element or section as soon as we know the CSS class of the element.

The first step is to inspect the desired element and find its class.

Right-click on any element and choose Inspect.

Inspect element

Look for the element class and write it down or just copy it to the clipboard, we will need it in a second.

Then, click on Customize from the Admin menu bar.

Click customize

Then, navigate to the Custom CSS option.

Custom css

Here, you will need to paste the code below inside the Custom CSS screen:

.class-goes-here {
	background-image: url('image-url');
	background-size: cover;
	background-position: center;

Make sure to replace the class-goes-here with the actual class of the element and the ‘image-url’ with the actual URL of the image.

The final result should look like that:

Add a background image with custom css

After adjusting the code, click on Publish and revisit your website and view your new beautiful background image.


In this article, you learned how to add an image to your website’s header section.

Leave us a comment and let us know where you got your image from and how did you implement them.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email


PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply