Posted on by Deepa Govind

To have Background picture for your header

Many custom templates offered by blogger beta either does not have a Background picture.. or the picture presented by default may not suit our taste. You too can have a custom looking header to your blog.Just follow the instructions closely

  1. SAVE YOUR TEMPLATE
  2. in TEMPLTE -EDIT HTML LOOK FOR
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
  3. Add the background-image: url(THE URL OF YOUR PICTURE); to your header-wrapper
  4. So that your final code should look something like this
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    background-image: url(THE URL OF YOUR PICTURE);
    }
    • If the picture of your choice is in the web.. then give the webURL
    • IF the Picture is in your hard disc then
      1. Then have a new post and insert that picture
      2. Go to edit html page…. You will see the html code for that picture
      3. Copy paste that code into a notepad
      4. Publish this new post (don’t worry u can delele later)

    • Use the URL u got from the previous step to get that picture on the header
    • IF you are satisfied with the new look of the header then you can delete the post having the picture. Don’t worry.. this will not affect the header…as the picture is stored in blogger
  5. SAVE and view your blog

You make me happy by comming and reading this post.You can make me feel little more happier by dropping in your comments.Good luck to have your customised header picture

From Deepa’s Template Tips

124 Replies to “To have Background picture for your header”

  4. thank you so much for this assistance Deepa!! i’ve wanted to do this for so long, even before Beta came out. and it was so simple!

    namaste!!

    Reply

  5. thank you so much for this assistance Deepa!! i’ve wanted to do this for so long, even before Beta came out. and it was so simple!

    namaste!!

    Reply

  8. Hi deepa,

    Thank you for your comment over at Google Groups.

    I tried your suggestion above, but I don’t have a “# header wrapper” section in my html . This is the part that I think might be relevant:

    (I took out the brackets to post this….)

    div id=’header-wrapper’
    b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’
    b:widget id=’Header1′ locked=’true’ title=’;img src=”http://i22.photobucket.com/albums/b312/Potter00/4boxesreal.jpg”> (Header)’ type=’Header’/
    /b:section
    /div

    Also, I don’t know if a background image is what I’m trying to do…the whole thing is an image, including the text (four boxes with stars). Basically the only thing I am looking to change is the title bar at the very top of the screen so it says “Four Boxes” instead of the html code for the image…Like yours says “Beta Template Testing”.

    Is this even possible?

    Thank you so much for your help!!

    Proud Dem — 4boxes.blogspot.com

    Reply

  9. Welcome dem

    #header {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    border-bottom:dotted 1px #05519e;
    background:#03036D;
    }
    u can inser the picture inside this
    background-image: url
    (donot give double quotes)
    Hope this helps
    Deepa

    Reply

  12. welcome CT
    u r template has this

    #header-wrapper
    {
    width:660px;
    margin:0 auto 10px;
    border:1px solid #cccccc;
    }

    just insert the
    background-image: url
    inside that
    if u r having problems .. even after this..(incaseif u have have already tried this).. pls give me details
    Deepa

    Reply

  13. Hi Deepa,

    I’ve posted the request elsewhere, but I’ll try here, too:
    I’d like to include a small graphic in the sidebar, bove the blogroll.
    I have the image on a disc.

    How would I go about downloading this graphic and including it above the blogroll in simple Blogger (I do not have Beta). blogsite: http:rangeragainstwar.blogpost.com

    Thank you,
    Lisa
    lisa@rangeragainstwar.com

    Reply

  15. Hi Deepa!

    You are so helpful!

    I have followed your instructions, and my image loads, but it just takes a small corner of the header. Is there anything I can do to have my image fill the entire header? I am using beta.

    Thanks!
    Meva.

    Reply

  16. Welcome Meva
    I saw the blog http://billsandmoonreturns.blogspot.com/.. i could not see any pic..i think u removed it coz it did tno fit well.
    your template has

    #header-wrapper {
    margin: 0;
    padding: 0;
    font: normal normal 100% ‘Lucida Grande’,’Trebuchet MS’;
    background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue.gif) no-repeat 0px 0px;
    }

    just delete
    background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue.gif) no-repeat 0px 0px;
    then i hope u r image will fit well
    Deepa

    Reply

  17. Me, again. Thanks for the advice but I just get a blank header. Where should I put the URL for my image?

    Thanks again for your help!

    Reply

  18. Meva..
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
    Add the
    background-image: url(THE URL OF YOUR PICTURE);

    to your header-wrapper

    Please do this..I would like to take a look at the hearder picture itself..coz.. right now.. i dont see any picture in your
    header-wrapper
    If you have already done his.. then perhaps it was not saved properly

    Reply

  19. Oh, deepa. I’m just a doofus. The image fills the field now, but it’s not a single image, but repeated several times.

    I haven’t saved it because it looks silly with 6 images, rather than 1. Is there anything I can do?

    Thanks for your patience and your help. If there’s nothing I can do to enlarge the image to fill the header field, I’ll just let it go.

    Once again, thanks so much.

    Reply

  21. I tried getting an image from flickr and just added as u said. But I get a message invalid variable.
    This my header wrapper-original
    #header-wrapper {
    background:$titleBgColor url(“http://www.blogblog.com/rounders2/corners_cap_top.gif”) no-repeat left top;
    margin:22px 0 0 0;
    padding:8px 0 0 0;
    color:$titleTextColor;
    }

    Reply

  22. Deepa, I finally was happy with the header I put in. I was trying to get just a single moon, but it wouldn’t work.

    But I’m happy with the look I’ve got now, so thanks so much for your help.

    cheers,
    meva

    Reply

  23. welcome Priya
    .. pls mention the url u are facing problem with

    i see that u have added
    background:$titleBgColor url(“http://www.blogblog.com/rounders2/corners_cap_top.

    I see the that the URL is incomeplete…http://www.blogblog.com/rounders2/corners_cap_top.
    ..no .jpg or anything

    1.must remove that line completly

    2.insert this in its place
    background-image: url(THE URL OF YOUR PICTURE);

    here the URL is not enclosed in double quote
    ie
    background-image: url(“http://somewhere/somepic.jpg”); is incorrect
    but
    background-image: url(http://somewhere/somepic.jpg); is correct

    Reply

  24. Meva
    the header [pic is fantastic.
    as for allowing the picture to occupy the netire space
    #header-wrapper {
    width:700px;

    try increasing the width until u feel its appropriate
    🙂

    Reply

  27. Can you tell me how to place code so that I can use a tiled gif file for a background image for the entire blogsite page? I was able to do this pre-beta but cannot figure out how to do it now.

    Thank you!

    Reply

  30. Hi Deepa…I was able to post a picture in my header…by I don’t want it to repeat itself. Is there any way I can place a picture on the RIGHT side of my header without repeating? Thanks!

    Reply

  31. Hi paolo
    If you dont want the background pic to be repeated just add this line
    background-repeat: no-repeat;
    For getting it at the rigt side
    background-position: rigt;
    But then i cant tell for sure if the position will work right…
    if this is not ok i suggest that u have a 3 colum header(just as i have)
    Hope this helps
    Deepa

    Reply

  34. hi, look, i’m from brazil and i’m trying to put a image on the top of the blog, in substitute of the simple title from the template.
    i did what you said but it didn’t work

    header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    background-image: url(http://bp1.blogger.com/_Bw1C_Qs7yi8/RZviMJrkl-I/AAAAAAAAAAM/TlLQJOvQje0/s1600-h/limao.bmp);
    }

    look, this is my url http://kamilalimaocomsal.blogspot.com/

    if you want, can email me on kamilabianchi@hotmail.com

    Reply

  35. Welcome Kamila
    I Saw u r blog and the link for the pic..the pic is really cute..
    Its correct.. i tried getting this pic at my heaader..but failed.. will get back to you soon.. ia m surprised… please do tell me what template u are using .. so taht i may experiment on a test blog..

    Reply

  36. Thanks for the help on the header. The only thing that I am wondering is if there is a way that I can have it so the title of my blog is not shown through the image? Thanks in advance for your help.

    Reply

  37. Welcome Richard
    //////////////////////////
    if there is a way that I can have it so the title of my blog is not shown through the image
    ////////////////////////////

    I dont undestand.. i see that u r picture has the pic + “Life By Me” as a single component.

    You blog name is ” – ” which is indeed shown in the header but not-immediatly-seen as it seems to blend with the color of the picture

    If you dont want the ” – ” to be shown in the picture , i suggest that u replace the header-elemnt with a picture element

    Just follow steps ONLY UPTIL Phase-1.. .. and then add the picture widget

    the objective is to delete the existing header widget and replace it with a picture widget…So complete only Phase 1 & proceed to Template-page elements -Add Element – Picture

    Hope this helps

    Reply

  40. Kumar.. there seems to be some problem with the picture you are using.. coz i waited for litrelly 30 min and i could not see your picture..
    however i tried a test with my header picture and it works fine..

    To see the diffrence and know how this worls try sharing my header picture URL as below
    delete teh lines enclosed within /* */
    add the lines shown in bold

    #header-wrapper {
    padding-bottom: 15px;

    /*background: url(http://www.blogblog.com/thisaway_blue/bg_header_bottom.gif)

    no-repeat left bottom;*/
    background-image: url(http://nea.ngi.it/templates/img/33-onde.jpg);
    height:300px; –you can change this value and see the diffrence
    }
    delete the line enclosed within /* */
    #header {
    /* background: #204063 url(http://www.blogblog.com/thisaway_blue/bg_header.gif)

    repeat-x left bottom;*/
    }
    Hope this helps

    Reply

  41. Thanks.
    Anyway I load a smaller pic and loaded into the head.
    Now its ok.
    I think the previous photo is a big size file..
    Later I give a try to your idea too.

    Reply

  43. Hi Deepa,

    Thanks for the tip. It was very useful. Can you show me how to fix my header such that the border is showing up properly and center (vertically and horizontally) my title?

    Thanks!!

    B

    Reply

  45. Hello MR.Anonymous
    SAVE and back up u r template

    Just replace the foll in your template
    ie.. replace the header-wrapper;header & header h1

    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:20px solid green;
    background-image: url(http://i103.photobucket.com/albums/m150/schmitgit/Blog_images/Header1.jpg);
    }

    #header {
    margin: 5px;
    border: 10px solid yellow;
    text-align: center;
    color:black;
    }

    #header h1 {
    margin:5px 5px 0;
    padding:15px 20px .25em;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    }

    I have just given some bold colors jut to make the lines identifiable
    border:20px solid green;
    border: 10px solid yellow;
    you may change the width from 20 px to 1px or 2px as it may suit you.. similarly you may also change the color of the border as it may suit you taste.
    For color codes see hexademal color chart

    Reply

  47. Hi Deepa,

    Thanks for your suggestion. Can you also show me how to extend the height of the yellow border so it matches the size of the picture? I tried adding something like this in

    #header-wrapper {
    width:800px;
    height:200px;
    margin:0 auto 10px;
    border:2px solid white;
    background-image: url(http://i103.photobucket.com/albums/m150/schmitgit/Blog_images/Header1.jpg);
    }

    #header {
    width: 790px;
    height: 190px;
    margin: 5px;
    border: 2px solid yellow;
    text-align: center;
    color:black;
    }

    But the border seemed to have disrupted the picture (on the right side), so I don’t think I’m doing it right.

    Also, can you show me how to vertically center the text as well?

    Thanks very much!!

    B.
    http://testb4use.blogspot.com/

    Reply

  48. Hi Anonymous (its kind of wierd..atleast give a screen name if its ok with you..)
    I am not exactly sure with you requirement.. so just a few suggesstions

    SUGGESSION : 1
    If you want the yellow border in place of white and then delete the exixting yellow border

    #header-wrapper {
    width:800px;
    height:200px;
    margin:0 auto 10px;
    border:2px solid white; < --change this to yellow
    background-image: url(http://i103.photobucket.com/albums/m150/schmitgit/Blog_images/Header1.jpg);
    }

    #header {
    width: 790px;
    height: 190px;
    margin: 5px;
    border: 2px solid yellow; delete this
    text-align: center;
    color:black;
    ——————————–
    SUGGESSION : 2
    If you want the white border to stay as it is.. and the yellow border to be placed little closer to the whiteborder then
    #header {
    width: 790px;
    height: 190px;
    margin: 5px; < --reduce this number and see the difference
    border: 2px solid yellow;
    text-align: center;
    color:black;
    }

    vertical-align:center;

    Try giving borders to
    header-wrapper – header – header h1 – header description

    .. and visually ascertain their boundaries..
    then it will be easy for you to confirm the alignment..

    without the borders all the 4 elements look like one single unit.. and decives us into thinking that the text is not aliged properly

    Reply

  49. So excited to find this! But can’t for the life of me get it to work. The closest code I find looks like this:
    #header-wrapper {
    margin:0;
    padding: 0;
    background-color: $headerCornersColor;
    text-align: left;
    }

    When I try to add your suggestion, keeps saying something about invariable skin code ‘background color’ not defined or something, and picture doesnt appear. Granted, I’m clueless about this stuff.

    my blog: bitchinspin.blogspot.com

    Reply

  50. Hi Anna
    Welcome
    I saw u blog template has
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    background-image: url(THE URL OF YOUR PICTURE); –u need to add this line of code
    }

    and replace the THE URL OF YOUR PICTURE with the exact url of th epicture that u want to use..
    If you still cant get it ..do send methe url of the picture that u want to use in the header

    Reply

  52. hi jojo..
    U rh header has this
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid #666666;
    background-image: url(“http://i9.photobucket.com/albums/a88/jacky4ever/bannertest.png”);
    } < --delete this margin: 5px;
    border: 1px solid #666666;
    text-align: center;
    color:#38B63C;
    }

    and also add
    height:200px;
    must add this inside the {} hope this helps

    Reply

  53. Hi Deepa,
    Thanks a million… I can see the header now.. but how can I delete the old header away? I tried to leave it blank but it gives a statement that I can’t leave it blank..
    Pls advise.
    tks again.
    JoJo

    Reply

  54. Glad that this worked
    as for the header title showing
    OPTION :-1
    in the blog settings you can give a blank space at the BLOG TITLE
    ,..if ist not accepting a blank space then u can give a . (dot)

    yet…not advisable.. this will put u r blog way down in the search engines

    OPTION:-2
    you can delete the header widget and replace it with a picture

    PHASE: 1
    Look for
    <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

    delete–maxwidget=’1′

    change–showaddelement=’yes’

    save

    Your final line of code should look like this
    <b:section class=’header’ id=’header’ showaddelement=’yes’>
    PHASE:2

    Template—Page Elements

    You must be able to see the “Add Page elements” in the header section

    Delete the Existing header
    Add a picture element giving the URL of the picture that u are atpresenet using

    Hope this would be ok..

    Reply

  55. Hi Deepa
    Thank you again.. maybe as you are right that it’s not advisable for me to delete the header…

    Is there anyway I can make the header font smaller?

    Regards

    Reply

  56. In the
    #header-wrapper {
    font-size:5px; < --add this Do see the difference and decide on the appropriate font size Hope this helps
    Deepa

    Reply

  61. I could use some help. I used to be able to edit HTML, but obviously lost my knowledge because I`m lost.

    I want to change the background colour, and instead of having their stupid banner across the top, I want an image.

    Would you mind taking a look at it and letting me know?

    http://skankopolis.blogspot.com/

    Reply

  62. Welcome SaRaM23
    I saw your blog..Your template has

    #header h1 {
    text-align: left;
    font-size: 200%;
    color: #ffffee;
    margin: 0;
    padding: 15px 20px 0 20px;
    background-image: url(http://www.blogblog.com/moto_son/topper.gif);
    background-repeat: repeat-x;
    background-position: top left;
    }

    The actual image image used in the header can be seen if u copy paste the url in a new window..
    Its asmall one..but as the repeat command is given..it just repeats itself over-and-over until it occupies the entire header

    If you have some picture of your personal choice then you can upload the pictutre to googlepages / geocities etc and replace the URL of the blogger pic with the URL_OF_U_R_PIC


    background-image: url (URL_OF_U_R_PIC);
    background-repeat: repeat-x; < --delete this
    background-position: top left; < --delete this

    After having your personal choice of pic in the header.. you may need to fine tune its width and height as per the visiblity and taste…dont worry.. these are very simple

    Hope this helps
    Deepa

    Reply

  65. Deepa,

    Hi. I am trying to create a custom header. I tried to follow your advic,e but blogger gave me an error message and would not allow me to preview the template. I removed the changes. Now I have a line where the header should be. Can you tell me what I am doing wrong?

    I’m at http://www.treadingh20.com

    Reply

  66. Hi kym
    Welcome to my blog
    thre is nothing wrong with the code ( pic url) you have added

    Your header wrapper does not have the height specified.. so you just need to add the height

    #header-wrapper {
    width:660px;
    height:350px; < --- add this
    margin:0 auto 10px;
    border:1px solid #333333;
    background-image: url(http://i176.photobucket.com/albums/w178/edjunc/Treading20Water20Banner205.gif);
    }

    this should make your picture visible

    Btw.. your picture has some “white-space around it..If possible try to isolate the picture from the surrounding white spaces..You will see this if you open the picture in some photo editing appl like photoshop or image ready

    Hope this helps
    Deepa

    Reply

  67. Hi SaRaM23..
    Here are the chages you need to do

    In the
    #header-wrapper {
    background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left < --delete this background-image: url(http://bp1.blogger.com/_3Xl9WNqeqAg/RgKyidFcWiI/AAAAAAAABoQ/KK2lb4GycDo/s400/Web-Banner.gif); < -- ADD THIS background-repeat: no-repeat; < --- ADD THIS repeat-x;
    margin: 0 auto;
    padding: 0 0 15px 0;
    border: 0;
    }

    in the
    #header h1 {
    text-align: left;
    font-size: 200%;
    color: #ffffee;
    margin: 0;
    padding: 15px 20px 0 20px;
    background-image: url(http://www.blogblog.com/moto_son/topper.gif); < -- delete this
    background-repeat: repeat-x;
    background-position: top left;
    }

    You will see that the picture only fills up to half of the entire header,,This is beacuse the width of our picture is only 400pixels…where as the width of your entire header is 692px

    So if you want the picture to fill up the entire header space ..then..you need to choose a picture taht is atleasst 692px wide

    Hope this helps
    Deepa

    Reply

  68. Thank you so much. I am still working on resizing the banner and getting the white space out but you help was tremendous! Thank you again.

    Kym

    Reply

  70. Hi,
    The instructions you put on this site to add a background picture into your header on one’s blog worked. Well, to a certain degree that is…I have my beautiful background, but I can’t seem to get my title in there now…please help me get my title there.

    Thanks,
    Catherine

    Reply

  71. Deepa,
    I am wondering if you can help me with my blog? I am wanting to add a picture. I have it downloaded at photobucket. Here is the link to me blog http://digiscrappin101.blogspot.com
    I have tried a few different things but the picture never appears. Here is the link to the picture I want to use; http://i148.photobucket.com/albums/s1/sunshinegurl23/CopyofDigiDoodlebug-1.jpg.
    and here is what my HTML is set at;
    #header-wrapper {
    width:700px;
    height:320px;
    margin:0 auto 10px;
    border:1px solid #333333;
    background-image:url
    (http://i148.photobucket.com/albums/s1/sunshinegurl23/CopyofDigiDoodlebug-1.jpg);
    }
    Thanks for any help.

    Reply

  75. Hi maiahs

    I see this in your source
    <div id=’header-wrapper’>
    <div class=’header section’ id=’header’><div class=’widget Header’ id=’Header1′>
    <div class=’titlewrapper’>
    <h1 class=’title’>
    <a href=’http://mystompinggrounds.blogspot.com/’>
    <img alt=’My Stamping Grounds’ src=’http://bp3.blogger.com/_R86UsDs3nJk/RgWFwxVjAI/AAAAAAAAACw/0QBgk6 nnn-‘/></a>
    </h1>

    Did you make any modificateion to this part of the template..

    The area where your title is supposed to appear has an incomplete <img> tag..
    thats the reason why you are not getting the title.

    I would suggest that you have a backup of the existing tempalte..delete the current header — save– then add header again… this must be able to resolve the header problem

    Hope this helps

    Reply

  79. Hi Maiahs..glad that the problem got fixedas for the font of your title.. you template has
    #header h1 {
    margin:0;
    padding:10px 30px 5px;
    line-height:1.2em;
    font: normal bold 200% ‘Trebuchet MS’,Verdana,Arial,Sans-serif;
    }
    You can try changing the value from 200% to 225 – 250 etc..etc..
    Remeber to take a backup always
    🙂

    Reply

  80. Thank you so much for your help :)! Your way is so much easier than the other way someone sent to me. I am wondering how to get the font called “Curlz”, and use it in my title??

    Reply

  81. hi..Maiah..
    thank you very much for the appreciation.. your appreciation is my motivaton.

    I have uploaded the Curlz font here..Just right click and save the file.

    START – SETTINGS-CONTROL PANEL – FONTS (folder) – INSTALL NEW FONT – SELECT THE FOLDER WHERE YOU HAVE SAVED THE FONT – INSTALL

    then you can add
    font-family: Curlz MT; where you want the font to be active…

    Hope this helps
    Deepa

    Reply

  82. Deepa,

    I had problems removing the white border around the header pic.

    What else should i amend to remove the padding?

    as usual, thanks for yr help.

    Krgds

    Reply

  84. Hi Maiahs
    You can add

    to your stylesheet (say after the
    body
    {….
    ….
    ….
    }

    .Curlzfont
    { font-family: Curlz MT;
    font-size: 18pt;
    color: green; }

    While posting.. you can say]
    <p class=”Curlzfont”> some text here </p>

    Reply

  86. THANX!

    This has been bothering from when I first started blogging. Now my blog looks exactly how I wanted it!

    THANX AGAIN!

    Frank

    Reply

  90. Welcome Monica

    I happen to see your blog http://monicaraab.blogspot.com

    Your template has
    #header-wrapper {
    background: #476 url(“http://www.blogblog.com/rounders4/corners_cap_top.gif”) no-repeat
    left top;     < ---DELETE THIS
    background-image: url(http://i150.photobucket.com/albums/s83/mraab/ChloeHeader.jpg); < --ADD THIS
    background-repeat: no-repeat; < --ADD THIS
    height:200px;     < ---ADD THIS
    margin:22px 0 0 0;
    padding:8px 0 0 0;
    color:#ffffff;
    }
    #header {
    background:url(“http://www.blogblog.com/rounders4/bg_hdr_bot.jpg”) no-repeat left bottom; < ----DELETE THIS
    padding:0 15px 8px;
    }

    The actual height of the picture is about 350px.. Incase you wnat to use the picture in full view then you can change
    height:200px; to 350 px

    My personal opinion would be 200 px

    Hope this helps
    Deepa

    Reply

  91. Hi Deepa, I’ve read all the posts on here and have tried to figure it out on my own, to no avail. I’m convinced you can help me, though!

    The look I want for the header is JUST the photo I have on there, without the extra type (“House of Jules”) over it. Also, I would like to lengthen the inside 1px border where it should go, near the bottom of the photo.

    Please help me with my blog header! I’ve been trying to work on it for a couple of days, to no avail. Thanks so much, I’ve learned a lot just by reading what you wrote to others.
    http://bigpikchur.blogspot.com/

    Sincerely, Jules

    Reply

  92. Welcome Jules

    I saw your blog
    The words HOUSE OF JULES that appear over the picture are those of your blog title..

    This is how the logic works,,,
    the header widget displays the blog title by default.. and a Background picture is also given for the header in the template … it also displays the picture

    So to avoid the words HOUSE OF JULES from appearing over the picture.. you need to delete the header widget and in its place use a html widget whre u can add the iamge using the
    <img src=”http://farm1.static.flickr.com/211/463543325_eaddafa2c6_o.jpg”/
    > tag
    ( 1 )
    Instructions on how to DELETE HEDER WIDGET see.. Update:-removing header widget in the above link

    ( 2 )

    Instructions on adding widget to the header directly are given here.. just follow

    PHASE : 1 ( all steps)
    PHASE : 2 ( only uptil step 4)

    Reply

  94. i don’t even know how to do step one!! i feel so computer illiterate 🙁 is there someone that could just do it for me … all the ^{}|~!@ signs confuse me. i just want a cool picture of grass or keylimes on my header.

    Reply

  95. Welcome KKK
    Dont worry about not able able to do things yourself… we all learnt out lessons in blogger.. you too shall learn in due course

    I could not see your blog in the profile.. so its kind of difficult to guide ..

    B/w..have you chosen the pic you wnat in your header..(once this is done.. rest is easy)

    As for STEP 1
    Click on Settings – template – Edit html – download full template…Save the template (its an XML file) in your Computer)

    Reply

  96. hey deepa, it is me again…just wondering how one goes about making the headline banner a bit bigger???

    Reply

  97. Also was wondering if you knew of any sites that had good blog templates?? I am looking to have two colums on either side of my posts not just on one side…hoping you can help

    Reply

  99. hope you are still reading this thread ’cause I could do with a hand please…:o) I have followed what you suggest and has all worked great up to now (thanks!!) – just wonder how I can get the image to fill the banner space. I have tried inserting width/heighht etc but does not seem to work for me?? http://www.heynoonoo.blogspot.com

    Reply

  100. Welcome NooNoo
    Yes..I do monitor all posts
    I saw you blog..I guess its brand-new..You need to have the header element inorder to allow the visiblity of the image in the header

    In also see that in http://bebebloometje.blogspot.com/ you already have a pic in the header..
    So i am confused as to which part of banner are u refering to..

    Reply

  101. not really sure what you mean. I have a header pic there by inserting the url into the html bit and it shows up but just not very big. tried altering the height etc. cheers
    (also, how do I add links to other sites in posts?)

    Reply

  102. NooNoo..
    At http://www.heynoonoo.blogspot.com
    ..I dont see any picture
    ////////////////////////////////////////
    I have a header pic there by inserting the url into the html bit
    //////////////////////////////////
    which html bit.. is it s HTML widget?

    You need to do this by using the <img src=”URL of the pic”>

    Or you can add a Header-Elent fromt he dashboad ( and select the picture option there and then give the picture url)

    If none of these seem to work.. do send me a screen shot of what you see to me (my mail id is in my profile)

    Reply

  103. In order to link to oter people.. you can use the link-list widget provided by blogger..Try it.,.Its easy to do..

    Reply

  104. think I may have done it…..just going to try and centre it now.
    thnks very much for your help…..I may be back!! Do you mind if I link you in a ‘how to’ post?
    thanks

    Reply

  105. NooNoo
    glad to see the pic in the header
    Yes..you can link to me..I shall feel honoured

    As for centering i guess you need to cahnge the laoyt from pixels to % percentage…this will ensure that the blog looks the same in all browsers

    May be this can help

    Reply

  108. Thanks a ton, Deepa, you are just too good. It did work, but only the photo size was too big. Maybe I will have to do some resizing.
    Sorry to bug you again, but is it also possible to have special effects of these background photos (like in a Powerpoint presentation) such that it fades in / out? Also, can we have special effects for the main title (for example, bounce / wavy etc)?

    Reply

  109. Raju..
    thanks for the appreciation..it motivates me alot

    Yes you need to do some rezising to make the picture compliment your header space…

    If you have photoshop.. then its possible to create your own animated pictures ( with 2- 3 static pictures) to give the fade-in-like-apprearence effect and save it as gif file.. and use the gif file in the header…
    Instructions to create your own animated pictures

    or else u will have to create a ppt – convert into flash and then uploading the flash file (.swf) to the hader is not advisable.. it puts lots of load on the browser and takes more time… so u r readers might think that their system gets hanged whenever they visit your site

    Reply

  110. Just wondering how one can use WordPress blog template themes in Blogger?? How can I find the html code to use the template??

    Reply

  111. Maiahs..
    Glad to see you after a long time..
    Unlike blogger wordpress does not allows the users with free account to modify the template.. Free-users can only change the stylesheet ( font – colors etc)

    You need to be a paid-user of wordpress inorder to gain access to the template for modification.

    this the THE REASON why i prefer blogger

    Reply

  112. Then do you know of any site that has really good templates like WordPress has, but for blogger?? Lol, been away for a bit…trying to get my family healthy again, if it isn’t one cold it is another one.

    Reply

  113. REMEMBER TO SAVE AND BACK UP YOUR TEMPLATE … WITH EXPAND WIDGETS BOXED CHECKED

    use the downlaod full template link and dload as xml
    and also copy paste into a notepad as txt file… just to be doubly sure taht u dont loose your widget codes and hacks

    try the template on a test blog only after satisfaction incorporate into your main blog

    Collection at
    http://www.finalsense.com/services/blog_templates/index.htm is impressive

    Reply

  115. I am wondering how to get this template to work, please help…
    it is the template with beautiful barn.

    http://images.google.ca/imgres?imgurl=http://www.minimalistic-design.net/d4oswd.jpg&imgrefurl=http://www.im-blog.info/category/free-templates/&h=264&w=330&sz=14&hl=en&start=34&um=1&tbnid=QsNtbO1eoPlhCM:&tbnh=95&tbnw=119&prev=/images%3Fq%3Dfree%2Bnature%2Bblog%2Btemplates%26start%3D20%26ndsp%3D20%26svnum%3D10%26um%3D1%26hl%3Den%26sa%3DN

    thank you deepa again for your help :)!

    Reply

  116. Maiah..
    I tried the link..
    This is basically a template for website hosted in perstonal domain.. not like blogger/wordpress
    ..If you downlaod the view the soirce of these tempalte u wi;ll see how the elements are organined as tables and like so
    However.. if you could get the permission formy the webmaster.. to use the pics in your blog.. then it would be great..
    Try googling for Blospot xml templates… before downloading aslo make sure if they are compatible with the XML version of blogger tempaltes..

    Good luck 🙂

    Reply

  117. found a different template but can’t get the code to work for me…here’s what was said when I pasted the code in.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “language”.

    Here is the code:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “language”.
    Hoping this is easy to fix.

    Reply

  118. okay ignore the last post because I would rather get this skins to work than the last one.

    Here is the message I get once I try to save it:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup.

    Reply

  120. Coming to this late and feel pretty stupid for not being able to make this work given how much advice you have given here.

    I uploaded the image and published the post–copied the html into the template (although my code doesn’t look exactly like what you said to find in the first place–and no picture.

    Here is the code from the template:

    #header-wrapper {
    background:$titleBgColor url(“http://www.blogblog.com/rounders3/corners_cap_top.gif”) no-repeat left top;
    margin:22px 0 0 0;
    padding:8px 0 0 0;
    color:$titleTextColor;
    background-image: url(“http://bp0.blogger.com/_CyOGwE4z5Yw/RqyD3puQ95I/AAAAAAAAAIw/cT1nbBkUv2M/s1600-h/Photo001.bmp”);
    }
    #header {
    background:url(“http://www.blogblog.com/rounders3/corners_cap_top.gif”) no-repeat left bottom;
    padding:0 15px 8px;
    }
    #header h1 {
    margin:0;
    padding:10px 30px 5px;
    line-height:1.2em;
    font: $pageTitleFont;
    }
    #header a,
    #header a:visited {
    text-decoration:none;
    color: $titleTextColor;
    }
    #header .description {
    margin:0;
    padding:5px 30px 10px;
    line-height:1.5em;
    font: $descriptionFont;
    }

    Advice?

    And thanks for all the work on this!

    Reply

  122. Okay,there is a picture that I would like to use for my blog header. I have the code for the pic, but don’t know where to put it in my edit html. Hoping you can help :D!

    Reply

  123. M_M
    Longtime no see… hope all is well
    Now blogger itself offers the facility to add pic from the page elements section

    just clik on the edit of the header.. u will see a url for picture.. give the url there.. and u have u r pic in the header.. do this and see if this satisfies your requirement

    however.. this does not give you TOTAL control over the look if the pic
    i guess u r template has somethig like HEADER-WRAPPER… i shall be able to tell you exactly where to add if you would share your url with me..

    or mail me your template as a text file
    TEMPALTE-EDIT HTML.. check the expand widget box
    Select-all — copy — paste in a notepad — save as text file

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Policy - Terms and Conditions