Sunday, February 25, 2007

Adding graphic background to blog Header

I have previously published a post on how to add a graphic to the New Blogger blog header in this post: Adding a graphic to your blog Header. With this method, other than pictures, you can add other stuff like Google AdSense ads, search box, etc. You also have the choice of leaving the Title alone (for search engine purpose this is good). Or like what a lot of people do, incorporate the title into the graphic and delete the text title which I think is a bad move as text title figure prominently in search engine for figuring out what a blog is all about.

Another way is to leave the Header and the Title as it is and add a background picture, as is done in this blog Business, Travel and Leisure and change color of the text Title to contrast with the background image (for example, for a dark image, make the text Title white). The way to do it is as follows:

First, backup your template (see post Backing up and changing your New Blogger (formerly Blogger Beta) template.

You will need a suitable picture already hosted on the web and have the URL ready. You can either use Blogger to host the graphic. See post Getting the New Blogger (formerly Blogger Beta) to host the photo for your profile, sidebar, Header, etc. (click "BACK" button to get back to this page) or use Photobucket.

Amazon products for graphics

Then in the template editor window, look for this block of codes

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Add the following line to the CSS:

background-image: url(URL of photo);

where URL of photo is the actual URL of the photo already hosted on the web. (Note: you will see some advocating using
background: url(URL of photo);
but background has been deprecated and you should be using background-image instead)

The block of codes then become

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

You will have to ensure that the color of the title contrast with the color of the background picture. In the case of the blog Business, Travel and Leisure, the picture is dark, and the original color of the blog title will not contrast well with the background picture, making it almost invisible. I changed the color to white. The block of text was then changed to

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;
}

where #FFFFFF is the HTML code for white.

To make things clearer, I paste below the actual codes to produce the background picture and to change the color of the Business, Travel and Leisure blog:

#header {
margin: 5px;
background-image: url(http://3.bp.blogspot.com/_jizoPL28qCY/ReF_9uMd1fI/AAAAAAAAAEQ/sBKLk65Uv2k/s1600/Bukit%2BTinggi,%2BPahang%2BHEADER%2BGRAOHIC.jpg);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;


Update 15 July 2007: Regarding whether there is a need to resize the picture to fit the Header, please refer to my response to Eternalsoul in the comments

Related posts



Special fonts for your blog clickable graphic header

How to put image or logo no the side of the header

57 comments:

  1. Hi.
    I'm not sure where to post this, but I hope you get this note.

    1 - First of all, I added Google search to my blog, and the right hand side of the box is cut off, why is that?
    2 - How can I change font color or size (or italicize) for a specific word in my header. I don't have an option the regular way.
    3 - The same question regarding the header to my blog links.
    4 - How about changing alignment, like center, right align, etc., of text in header and text in blog link header.

    Thank you so much for your service. Keep it up!

    I hope to hear from you soon. :)

    ReplyDelete
  2. Hi Peter, how are you?
    How can I "stretch" my blog to be able to have a left margin for ads or search box, like your blog does. On mine I can't seem to find the option.
    Thanks as always!!!

    ReplyDelete
  3. Hi Independent forum thinker,

    I am fine, enjoying blogging and partiipating in the AsSense program, learning new things every day, and enjoying every minute of it. Thanks for taking an interest in my well-being.

    If you are referring to this blog, it isn't really stretched, it is just a matter of changing over to a 3 column template for New Blogger (formerly Blogger beta). And it is sized to take into consideration visitors who are still using the small screen 800x600 screen resolution (which still represent 5-20% of my vistors). If you are using large screen, you will see "wasted" white space on both side of the screen, but it is a sacrifice I made so as not to put off the small minority of my visitors. If you are interested in other 3 column templates that are optimised for larger screens, you should look at 3 column New Blogger (formerly Blogger Beta) templates modified by Charlemagne Stavanger.

    If you have further questions, feel welcome to comment again.

    Peter
    Natural Remedies

    ReplyDelete
  4. I folowed your directions and it works like a charm...now, how do you make the custom header a "clickable" link?

    Thanks!

    ReplyDelete
  5. Dear Peter,
    I’m glad all is well.
    Thank you so much for helping me. Please check out my new template
    Here
    But now I have some new questions which are puzzling me.
    I am trying to
    1 - Change the font size and color of my posts
    2 - Change the font size and color of the text over my blog links
    3 - The color of the blog links
    4 – Header background color

    When I log into my blog account and try to change these things, it says it changed them, but my blog stays exactly as before. This is quite puzzling and frustrating.
    Could it have something to do with the fact that I downloaded this template from blogworlds, as per your advice?
    If yes, what can I do to change these things?

    Thanks as always. Have a great day!
    You’re the best!

    ReplyDelete
  6. Sorry, the link to my blog was wrong. But you can visit by clicking on my name.
    I hope to hear your brilliant answers soon. :)
    Thank you again, and be well!

    ReplyDelete
  7. Look at this post Adding Images to your Blog Header. It is somewhere at the bottom of the post.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  8. Hi Independent Frum Thinker,

    To change is very much easier with the New Blogger template as compared with the old classic Blogger template. Have a look at this post How to change the color of your blog background, font color, etc with the New Blogger

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  9. Independent Frum Thinker said: "I hope to hear your brilliant answers soon. :)"

    Not sure what is being refered to, but I think, it is the timing and the question has been addressed in the comment above.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  10. Hi,

    I'd like to change the background color of the sidebars, but keep the background of the middle white. something like this: www.jordanferney.blogspot.com.

    Do you know how to do this?

    Thanks,

    ReplyDelete
  11. I tested it on my test blog Peter's Test Blog and found that I could do it by adding background-color:red; to this in the template:

    #sidebar-wrapper {
    width: 150px;
    float: right;
    background:red;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    }

    By right, if I want the same color I should use a color picker tool. You can get the link to download the tool for this tast in Blending the color of your ads to the color of the website.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  12. Hi Peter,
    Your blog tips are great. I appreciate that you choose to do this in your retirement!

    I have followed your directions above and they work for me every time I get a picture from my blog, unless it is a picture posted in 2007. I have noticed that the pictures that work as a background start with this: http://photos1.blogger.com/...

    The ones that do not start with this: http://bp0.blogger.com/...

    Do you know what I am doing wrong?

    I would like to use this picture:
    Link to photo that works
    but when I do that I just get a blue background with no plane.

    I cropped it and uploaded it here:
    Link to photo that doesn't work
    but it just reverts to my black background.

    Thank you in advance for any help you might offer.

    ReplyDelete
  13. Thank you Peter, that picture tip helped. I had read that post but I didn't figure out that was the problem. Now I just need to get the picture size right.

    ReplyDelete
  14. Hi peter
    questions:
    1. how can i make the width of my header to fit the overall width of my blog ie (side bars & text). thanks

    i hv been messing around by failed. argh!!!

    2. clickable background? how can i do it? i know u explained before but are they for old or new blogger?

    thanks

    ReplyDelete
  15. Hi bidarlah,

    Regarding question 1, I hate to admit it, but I am not an expert in template manipulation. I can only guess or experiment. You have not shown a profile or URL to your site, so I can't even start to guess. If you failed to get support from the creator of the template, the best thing to do is to provide the URL to your blog in a request for help from Google Blogger Help group, where there are many who are good in manipulating templates.

    2. This post Ading a graphic to your blog Header should explain how to do that. If you cannot follow, you have to be specific and let me know what the problem is.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  16. Thanks for the help, perfect and simple as usual.

    http://james-powell.blogspot.com

    ReplyDelete
  17. I hope you know how to do picture for background like this http://rosettarants.blogspot.com/ I like to put on mine as well

    ReplyDelete
  18. At last I got it right, almost the same with the header graphic background like the one you've showed. Thanks to you!

    ReplyDelete
  19. Hi Jollence,

    The graphic header in that blog don't look like a background picture to me. I believe it is a graphic done with graphic programs like Illustrator, Photoshop, etc., with the text title deleted. If you have such software and is able to do such graphic, you can use methods described in
    Adding a graphic header to your blog. If you want to remove the text title (inadvisable in my opinion as the text title is figured high in priority in helping search engines figure out what your blog is all about and help people find your blog via search engines) the method on how to do is is described at the bottom of the post.

    You may also see if the method described in this post, which retains the text title (but the text title will look like the description of the blog) refer to post Special fonts for your graphic header without deleting the blog text title.

    There is one more simple method (newly introduced I believe because I didn't notice it earlier): Another way to add a graphic to your blog Header.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  20. You are right about header title for search engines. thats why I didn't delete mine. http://jollencetravel.blogspot.com

    ReplyDelete
  21. I would like to know if it is possible to place in the blog header a flash movie (.swf file) instead of an image.
    Thank you in advance!

    ReplyDelete
  22. Hi Sailor,

    To tell you the truth, graphic in Header is not my favorite. See any graphic in this blog? I only put graphics in demonstration blogs. Flash Movies, sorry, I don't know how to do it.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  23. Hi Peter
    I would like to add a graphic background to my header but I dont know if the picture will get resized automatically or we have to manually resize it to the desired header size. Would appreciate your help. Thank you and once again your blog is a wonderful help to me. I make it a point to see it every other day.
    Good day to you
    Eternalsoul

    ReplyDelete
  24. Hi Eternal Soul,

    If you use a small image like Kuching Waterfront, the image will be repeated. See Test Music Upload for example.

    If you don't want the picture to repeat, you will then have add an extra line

    background-repeat: no-repeat;

    in which case you will have to size the image to fit the Header. To find the Header width, refer to How to find the width of the blog Header, main column, sidebar. I use a very good free photo editor to resize my images. See Irfanview photo editor for your blogging tasks.

    BTW, background has been deprecated and now you should be using

    background-repeat: url(photo URL);

    If you don't want the picture to repeat, you will then have add an extra line

    background-repeat: no-repeat;

    in which case you will have to size the image to fit the Header. To find the Header width, refer to How to find the width of the blog Header, main column, sidebar. I use a very good free photo editor to resize my images. See Irfanview photo editor for your blogging tasks.

    I will have to update this post.

    Peter (Blog*Star 2006 and 2007)
    Earning Online

    ReplyDelete
  25. Hi Peter,
    I was able to post an image to my blog, but I was wondering if there is anyway to manipulate it so that the image does not repeat itself, but is only on one part of the header? Thanks!

    ReplyDelete
  26. Hi Lew,

    Try adding the attribute

    background-repeat: no-repeat

    Peter (Blog*Star)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  27. Peter,
    Thanks to you I could picturise my header. You are so helpful.
    Eternalsoul

    ReplyDelete
  28. This is not working for me at all. You directions are SO simple. But alas. Nothing.

    ReplyDelete
  29. Hi Chamberlain,

    Why don't you describe your problem in greater details. Perhaps the URL for the photo you use or describe step by step what you tried to do.

    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  30. Hi there, very informative blog. I was just reading up about adding a header graphic - I am a Photoshop artist and I'm building a graphic that will include my blog title embedded in my image. I was just wondering, wouldn't adding a text field just below my header (with "rich text editor" element) that includes my blog title and description serve the same purpose as the text title and description in the header (as far as search engines are concerned)? I guess I am concerned since one of the blogs I'd like to do this with has the top search spot on Google for the subject and I don't want that to go away! Any insight?

    ReplyDelete
  31. Hi Sarah,

    I think using "description" to serve as a kind of blog title may be more effective as I believe search engines place emphasis on blog title plus description. If you don't want the description to be too prominent, you can always change the font so small. See
    Using Graphic Header and making Description serve as a kind of blog title to make blog search engine friendly

    Maybe you may want to consider adding the graphic as a background image, and set the font size to small, but I suspect that may spoil your graphic you have worked so hard on. See

    Graphic background for blog Header

    Peter (Blog*Star)
    What a grateful blogger did for me
    (no one should feel obligated. Everthing completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  32. Hi Sarah,

    Forgot to add, don't ever try to make the description appear invisible by making the font color same as backgroud. That can get your blog banned by search engines as that is considered black hat SEO. I think I better check to see if I have added that warning to the post.

    Peter a.k.a. enviroman
    Enviroman Says
    (floods in England, polar ice and ice caps at moutain peaks melting, I think more severe and frequent hurricanes in US, rain when it is supposed to be a dry season in my country, someone from Queensland recently contacted me if I noticed the weather changing. I replied when I was young I had to sleep under the blanket, but now I sleep topless. If I remembered, he said it is freezing in tropical Queensland and now he has to sleep under a blanket. Please folks, take good care of our one and only Spaceship Earth which have no lifeboat. It may not affect us severely now, but it has every chance of severely affecting our future generations. Then they will have lots to be "thankful to us)

    ReplyDelete
  33. Thanks Peter. Came here to find out how to upload header. Never thought about PhotoBucket, now I do. I was having problem getting my new header to appear on my blog The NextPost. After reading your instruction, went back to upload header graphic to PhotoBucket. Now everything is fine.

    ReplyDelete
  34. Thank you for your blog site, I have found very valuable information on how to change my blog. I am wondering if you can help me though, I have added a custom header that I made in Photoshop and when I add it, it is blurry. The resolution is at the right level, the pixels are within the boundries. I have tried everything, wondering if you have any suggestions on how to fix it. Thanks!

    ReplyDelete
  35. Hi NatRat,

    Thanks for the kind words. I am a cheapskate I am afraid. I only use free photo editor like Free Irfanview photo editor. Maybe one day I may try Photoshop, but for the moment don't know how to help.

    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain

    ReplyDelete
  36. Hi NatRat,

    Maybe there is something I can do. Refer you to all the posts I have ever made regarding graphic blog Header and see if they may provide some kind of solution to you. Please give feedback if you find some helpful information which solve your problem.

    All about graphic blog Header and post title.

    Peter Blog*Star
    Alternatives to Google AdSense

    ReplyDelete
  37. I hope this is an okay place to post this question. I've never changed my original template (now jury-rigged with all different backgrounds, etc.) over to the newest "layout" version of blogger.

    1. Should I?
    2. Why or why not?

    Most tips seem to be for the new layout version. I can't find the right places in my template to make the changes mentioned.

    Many thanks!

    ReplyDelete
  38. 1. Should I?

    It is more robust, publishing faster, easier in lots of aspects especially for those who hate stuff like HTML (but to me a blogger minus HTML is like a quadraplegic in a wheelchair), lots of extra features like LAYOUT where you can customize your blog without getting into the template, move things around by drag-and-drop, third party widgets plus templates plus I believe Blogger themselves will be adding more in the future. And the best for those who want their own domain (own property, not sub-domains of blogspot.com, property of Google Blogger), you can use cusotm domain, and can you beat this, Blogger will even host it for you FREE!

    2. Why or why not?

    Maybe you like your old template so much and/or have done a lot of customizations. Some customizations can be copied from the old classic template, then added to the New Blogger template (usually via LAYOUT, no need to go to template editor), but some cannot. Also, when you backup old classic template, you backup everything. For New Blogger templates, some Page Elements may be deleted when you change template. See backing up New Blogger template PLUS Page Elements. But good thing is, when you change to New Blogger template, Blogger will backup your old classic template for you and you can go back anytime and lose nothing. Further, you yourself can save a backup.

    What are you waiting for? (Disclaimer: advice are given in good faith and to the very best of my knowledge and what I think is good for you. Decision is yours. Risk is yours).

    Peter Blog*Star
    Digital Candlelight Vigil

    ReplyDelete
  39. Thanks, Peter. Maybe I'll get brave and take the leap. ;>

    And, I can easily believe that Moscow is one of, if not THE most expensive city in the world. London must be a close second...

    ReplyDelete
  40. I did it! I changed.:> Thanks for your help. I'm glad I can still get in and mess around with the html code. Otherwise, why bother?

    I'm hoping you can help a little more.Indyfrumthinker asked this, but I didn't see the answer.

    1. How can I change the text alignment of my header?

    The default is top left. I'd prefer bottom left or even top right. I've messed around with margin and padding values (and a few other things...), but didn't see any result.

    2. How can I add a permanent quote as wide as the header underneath the header?

    THANKS for your invaluable help!
    Kate

    ReplyDelete
  41. Hi Kate,
    =============================
    "1. How can I change the text alignment of my header? "

    Mess with this in the CSS:

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    Try playing with adding stuff like:

    position:absolute;
    left:100px;
    top:150px

    position:fixed;
    left:5px;
    top:5px;

    to the above. I am just guessing, so make sure you backup template PLUS Page Elements before you start messing with the template. Even better, start a test blog with same template and mess around with that first before you try anything for your actual blog. Feedback on how it go will be highly appreciated.

    ===========================
    "2. How can I add a permanent quote as wide as the header underneath the header?"

    Sorry, don't understand.
    ==============================

    Peter Blog*Star
    Digital Candlelight Vigil

    ReplyDelete
  42. hey there! I've used some of your tips above to add a header image, to resize the content and it looks good. The one thing I can't seem to find directions on, is how to have a background image on the entire blog yet at the same time keep the background color behind the content. I can do the first part of this...but I can't figure out how to do the second part. I've seen it done on other similar blogs here, just can't quite figure it out. Thanks in advance!

    ReplyDelete
  43. Hi Cindy,

    You have some URL's of example blogs that have what your want?

    Post them here but make sure you make them an active (clickable) link like

    Make active (clickable) links in posts and comments

    because if you just copy-paste the URL here, they may be long unbroken line which can cause problems, and I may be forced to delete them.

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  44. hey Peter - guess what, I figured it out. I wasn't crazy about the way it looked, I need to make a better background texture, so until then I just left it a solid color. Thank you tho!

    btw - not sure what you meant about your comment w/ Flickr, sorry! Due to business practices, I don't really upload client's files to public sites.

    Thank you again!! :)

    ReplyDelete
  45. This is the most helpful one I have found yet. Thank you!

    ReplyDelete
  46. Hey Peter,
    I have a question. Its really basic but I am new to blogger. So how do you add a background to your blog? yea I know its a dumb question but im just sorta new.

    Thanks!

    ReplyDelete
  47. Hi tpan,

    I have 2 search boxes in this blog, 1 at the top and 1 in the footer that can search many blogs (.). Try searching for "background" and. I am sure you will find a post that will help you. If not, ask again.

    ReplyDelete
  48. hii peter
    can i put animated GIF image in my blog header???

    ReplyDelete
  49. I tried via LAYOUT and failed. Perhaps doing it direct in the template may work.

    ReplyDelete
  50. Hi Peter,

    I used this method and my header image was shrinked..

    http://excentrixl.blogspot.com/

    how do i make it fit? or enlarge the header's size?

    ReplyDelete
  51. Hi,
    Can u pls help how to make border for the image like this 2 links
    http://sunitabhuyan.com/?p=1006 and http://sunitabhuyan.com/?p=819 In this second link, pls hel me how to make calendar frame.
    Thanks

    ReplyDelete
  52. I am guessing those photo frames are likely done with photo editors like Photoshop or GIMP or some other programs or perhaps even through online applications like Photobucket, maybe even Picassa etc. I don't deal with fancy images much so have not check out fully all those I mentioned above but suggest you go check them out.

    ReplyDelete
  53. Hi.
    Im not sure how to get rid of something in my header that i dont want anymore. can u take a look at my blogg and tell me how to get rid of apeice of old picture i once had as my header ?
    let me know ASAP.

    thanks.

    _jordan(:

    ReplyDelete
  54. Thanks for sharing!!!

    Regards,
    clipping path

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics