Header image beside blog title

Header image beside blog title

                  Instead of having an image occupy the entire Header section, some might want to have a small image beside the Blog Title and Description, either on the left or on the right of the Header. Blogger has a simple feature which allows you to upload an image to the Header. However, as we had explained in our article Background Image for Blogger Header (New), this image appears as a backdrop to the Blog Title and moves with the Title. To have the image on one side, you can try.

Using Blogger Header Image Upload

Let's say we have a small picture (150px by 150px) that we want to put on the left of our Blog Header. Use an image editing software to create a new blank canvas of 760px (width) by 150px (height). Check the Header width of your template. Normally it is found under #header{ of the template. Change the width to cater to your Header.

Save this newly created image into our computer and we are ready to upload it to our Header. Go to Template -> Page Elements and click the Edit link in the Header. Upload this image and for “Placement” select “Behind title and description.”

When you view the Blog, you would probably notice that the Title and Description overlaps the Image because most templates align the Blog Title to the left.

The next step is to align the Header Title and Description by adding a left margin greater than the width of the picture. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if you are using a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.

In our example, we added a left margin as follows:-

h1.title {

margin-left: 200px;

#header .description {

margin-left: 200px;

Preview the template. Save. We now have a nice little Header Image beside our Blog Title and Blog Description!