Search for a plugin or theme

How to Add Free Images to WordPress Header

How to Add Free Images to WordPress Header

It has been said before that an image 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 is going 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 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.

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 downloads)

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

Royalty-free images (paid downloads)

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

Add an 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 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.

Conclusion

A website without images doesn’t worth much and won’t convert well. Therefore adding images to your websites should be a top priority.

This tutorial showed you how to add images in a few different ways.

If there are more websites that you would like to add the source list above lets us know by leaving a comment down below.

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

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