Add Image to Blogger Header

In the previous post, we discussed changing the background color of the Blogger header. Similarly, you can also add a custom image to your Blogger blog header. Adding an image to a Blogger blog header is very simple. There are two methods to add a header image to a Blogger blog: one is directly uploading the image and the second one is using a background image tag.

How to add image to Blogger header :

You can add a background image to your Blogger header from your Blogger Layout or by adding a background image tag to the header CSS code on your Blogger template code. The best way to add a background image to your Blogger header is by adding a header image tag to your Blogger template code. In this post, I'm going to show you how to add a custom background image to your Blogger header in two ways. The method below is the best way to add a background image to your Blogger header.

Follow below steps to add background image to your Blogger header :

Step 1 : Go to Blogger dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search for .header-outer { in your Blogger template code

Add below tag just below the above code.

Background : url(" background image url ");

Note : Change background image url with your image URL.

Step 5 : Click on Save Template

That's it, you have successfully added a background image to your Blogger header. Just open your blog and check. This is the best and most effective method. This method will give better results than the other method. With this method, you can also change the size of the background image after you have added it. So, with this method, you can easily add and adjust the background image of your blog header.

Another method is also available to add a background image to your Blogger header, which is also very simple. You just need to directly upload the image to your Blogger header. Below, I'm showing you how to add a background image to the Blogger header with this method.

Another method to add background image to your Blogger header :

Step 1 : Go to Blogger Dashboard

Step 2 : Click on template and click on Edit HTML

Search for */header - wrapper and set width like below

  */header - wrapper
            {
width : 510px;

Set width as you require and click on save template.

Step 3: Now you have to choose image with size as mentioned in above code.

Step 4 : Go to Blogger Layout and click on edit corresponding to header widget.

Step 5 : Click on browse button and add image from your computer or from web, and then click on Save.

These are the two methods to add image as background to your Blogger header.