RealcomBiz
Pin It

How To Replace Blogger Header With Image In Picture Window Template

by Durodola Ridwan | Wednesday, July 18, 2012 | 20 Comments

This tutorial will help you on how you can replace your blogger header with a background image in picture window template, most bloggers find it difficult to do this because the process involve in replacing the header with image in window template is quite different from some other template.
If you upload the image background from the page elements, you will notice that it will affect your mobile template, except you add the header tag code to your template html and exclude the title and description to avoid overlapping of the background image and title.


How to Change Your Blogger Header
  • Login to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Use ctrl F to find the code below
.Header h1 {
  font: $(header.font);
  • Replace it with the code below
.Header h1 {display:none;}
  font: $(header.font);
  • Now search for the following code
/* Header
----------------------------------------------- */
  • Copy and paste the following code below the code above
#header { width:600px; height:100px; margin:0 auto 10px; background: #fff url(BACKGROUND IMAGE URL) no-repeat top right; }

After placement of code in the second search, your final result should look like the image below


  • Replace BACKGROUND IMAGE URL with the url/link of your background/header image, if you don't know where to host your image, you may read how to host image on blogspot 
  • Edit width:600px; and height:100px; to adjust your background image size until it best suit your header size and make sure you preview your changes before you finally click "SAVE TEMPLATE"
Hope this tricks helps? Take few seconds to share it and subcribe to this blog now, and receive all our latest posts directly into your email. Stay bless



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

20 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Replies
    1. Sorry the url was not attached

      http://fundapass.blogspot.in/2012/10/how-to-add-image-to-blogger-header.html

      Delete
  2. Hey, richtig super Internetseite. Woher hast du das Theme oder ist das selbst programmiert?
    Medical Billing Services

    ReplyDelete
  3. http://hackthehackersidea.blogspot.com/
    http://abdulsamadessani.blogspot.com/
    please visits my blogs.
    live tv
    movies
    games
    softwares
    drivers

    ReplyDelete
  4. How to add blogger background In Picture Window Template?

    ReplyDelete
    Replies
    1. Look for the following line in your template

      body {
      background: $bgcolor;

      margin:0;
      color:$textcolor;
      font:x-small Arial sans-serif;
      font-size/* */:/**/small;
      text-align: center;
      }

      You may not find exactly that, you can find body {
      Now change the bolded text with your background image. E.g
      background: (URL-OF-IMAGE);

      Delete
    2. I found the following line in my template, please help me.
      /* Content
      ----------------------------------------------- */
      body {
      font: $(body.font);
      color: $(body.text.color);
      background: $(body.background);
      padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
      $(body.background.override)
      }

      Delete
    3. Now replace
      background: $(body.background);
      with
      background: url(IMAGE-URL);
      edit IMAGE-URL.

      Delete
    4. It is not work. Any advice?
      http://testtotest1.blogspot.com/

      Delete
    5. After making the changes, let me see how the final code you are using look (including the image url).

      Delete
  5. I replaced
    background: $(body.background);
    with
    background: url(http://i1225.photobucket.com/albums/ee384/theinmyooo/bg.png)

    ReplyDelete
    Replies
    1. Make sure there is a semicolon at the end of the close-bracket like this
      background: url(http://
      i1225.photobucket.com/albums/
      ee384/theinmyooo/bg.png);
      and try again.

      Delete
    2. It is not showing full background. Please help.
      http://testtotest1.blogspot.com/

      Delete
  6. Hi,
    Thanks for sharing this post with us. It's really an amazing post. Keep posting the good work in future too.
    bad credit business loan

    ReplyDelete
  7. This tutorial about removing the blogger header with image is very informative. You have done very great work by telling comprehensively and step by step. With this tutorial, it is looking very easy to remove blogger header. I appreciate your work. Newcastle wedding photography

    ReplyDelete
  8. thanks for this man its working....

    ReplyDelete
  9. Thanks to share this tips and I am really grateful to the author. mwd pulser

    ReplyDelete
  10. I enjoyed it very much, The term is so good I think. I really appreciate this method and article. Really love it. remove background from image is one of best term of PS.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger