Add image to blogger header

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

How to add image to Blogger header :

You can add background image to Blogger header from your Blogger Layout or by adding background image tag to header CSS code on your Blogger template code. The best way to add background image to your Blogger header is adding header image tag to your Blogger template code. In this post I'm going to show you how to add custom background image to your Blogger header in two ways. Below method is the best way to add 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 background image to your Blogger header. Just open your blog and check. This is the best and effective method. This method will give better results than other method. With this method you can change size of the background image after you adding also. So with this method you can add and adjust background image of your blog header.

Another method is also there to add background image to your Blogger header. That method is also very simple. Just you have to get directly upload image to your Blogger header. Below I'm showing how to add background image to 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.

No comments:

Post a Comment