16 October 2006

How to Put a Background Image in Your Blog Header

Laura gave me this info. I’m just passing it on.

Like before, this information is only relevant to Blogger, as far as I know.

What you need to do is edit the CSS code in the template file for your blog. If you haven’t already tried this, just login to Blogger, select your blog, and click on the “Template” tab. It will show you a window full of code. The first section of the code, the part that shows a bunch of mumbo-jumbo on lines starting with “.” or in {funky curly parens}, is called the CSS, or style-sheet code. It tells web browsers how to set the colors, layout, images, fonts, etc, and is uniform for your whole blog. After that section, the rest of the template consists of HTML code <the stuff in arrow brackets>. This supplies all the content for your pages – what links are in the sidebar, the code that puts what you enter into the blogger edit-post window into the right place on your blog page, etc. Both the CSS and HTML sections of your template code are divided into sections for header, profile, sidebar, posts, and any other divisions you may have in your blog layout. Most of the code actually resembles English, once you get over the shock of the funky punctuation. But to get definitions for all codes or any other reference info relating to web pages, I highly recommend this really cool site I found recently: W3Schools.

Okay. Laura and I are both using the Blogger “Minima White” template. This template creates a box at the top of the blog that you can fill, if you choose, with your own image. I imagine the “Minima Black” is the same, and it’s possible that other templates also have space for images. What follows is how to do it with “Minima White.”

If “Minima White” is not already your template, first copy and save whatever code you may have added to your old template (sidebar links, images, etc) to some other location – a word processing file is a good place. Then, change your template to Minima White. This will erase whatever additions you had made to your old template, but does not change anything about the posts or comments you already have.

Now, paste the sidebar links or images back into this new template. Take a look at it, and check that it’s working.

Now look closely at the CSS code at the top of the text for your new template. Scroll down just a little bit until you see this:

/* Header

In the very first set of text below the word “Header,” you want to insert a line of code directing the browser to your image (you should already have created an image and put it online somewhere, for instance on Photobucket.com). On a line (or two) of its own, in between the line that begins “border:” and the two curly parens that come on the next line, insert the following text:

background-image: url(http://www.photobucket.com/albums/aastrikke/Whatever.jpg)

But of course you should replace the URL with the correct one for your photo.

Whenever you want to change the photo, just replace this URL with a different one (and don’t forget to save and republish the template text afterwards).

You can put any size image in there, and take your pot luck as to how it will be stretched or cut off to fit. Or, you can make the image the right size, which we’ve figured out through trial and error is about 700 pixels in width by 130 pixels in height.

If you want to change the colors in your template (for the header text, or for title, or links, etc), you have to find the relevant line in the CSS code. Then, simply change the 3-digit code for the color. You can get the color codes by looking them up on W3Schools, or just googling “CSS color codes.” Most HTML/CSS color codes are usually listed in a 6-digit form. For some reason I can’t fathom, the first three digits only work for blogger. Note that “vlink” means “visited link,” “alink” or “link:hover” means an active link, which is one that has a mouse “hovering” over it, and just plain “link,” is, of course,
a link.

Someone else asked me how I was able to link to a separate text file of my own. The trick there is simply to have access to some space on a server somewhere. I have a certain amount of space for free on my university server. You might, too – if you don’t know, ask the IT people at your school. If not, there are probably free online services that offer space for any kind of files (not just images, like PhotoBucket or Flickr), I just don’t know what they are. Google for it, and I bet you’ll find some. It might be important to know the term “FTP,” or “File Transfer Protocol.” That’s what you need to transfer files from your computer’s harddrive to the internet. Most image hosting sites offer software of their own that does this very easily, and I assume other kinds of hosting sites would too. If you have university space, they’ll have FTP software to offer also. Once a file is online, you link to it just as you would to any other address on the internet.

Please post corrections and additions to the comments!

EDITED TO ADD: please remember - if you want to insert an image from a site like PhotoBucket into either HTML or CSS code, you need to copy the URL, NOT the "HTML code"!!! Because you already have the code!! You only want the ADDRESS of the image, and that's what "URL" means.

28 comments:

spider said...

Kate,
It was REALLY nice of you to publish the steps for how to put a photo in the header. Thank you. Your directions are very clear. Hope you feel bran' new soon.

Anonymous said...

Kate, thanks for your sharing your wisdom. Great help.
Cheers

Anonymous said...

kate thank you very much for this great help... i've spent almost a week to find how to do it properly and only you were able to put it in laymans term. thanks again..

Anonymous said...

I thank you from the bottom of my heart for this. I have been trying since migrating to beta to sort this out to no avail, and hey presto, I have a wonderful custom banner made by some judicious photo-cropping and following your excellent, clear, advice.

Honestly, if you were here, I'd hug you.

Murat Altinbasak said...

Many thanks for the instructions. I was able to add a picture to my blog header thanks to your help.

Anonymous said...

Thanks for the colour tips and link. <3 <3 <3

Sun Li Nuan said...

hmmm... i think i'm not doing it the right way... mind if you help me??? can you send me the whole code you have??? so that i can study it... and would that be applicable as a backgrounmd picture, not just the header alone???

Sun Li Nuan said...

or i can send you mine and then enter the code for the BG pic or header...
hope you bare with me... i'm not really that good in computer

Sun Li Nuan said...

please send an email to this address...
sun_li_nuan@yahoo.com

thanks

Anonymous said...

hi kate

your infomation is very helpful but im struggling to get my pic to show
on photobucket.com they give you a url , img code and html tag.
shoud i first insert the html tag just below the header and then the url.
i have a minima back template.
please can you send me a copy of your code so i can impliment it cause my
header reshapes but no pic displays
my email is :eddyvw4@msn.com

thank you

Chris said...

I also have minima black & code isnt working for me....pic just doesnt show...could you show us a snapshot of the code?

Thanks!!

paddy said...
This comment has been removed by the author.
Anonymous said...

Kate, you are amazing! Thanks for this post!

Anonymous said...

Ohhh I am so technologically challenged and I want to do this so badly.

My blog HTML looks like this

}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

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


Where do I put the Photobucket image?
There are 3 options for the photobucket, I am using the one that says HTML Tag, is that right?

I am sorry to have to ask all these questions...Thank you so much for sharing your knowledge!
Diann

Chris and Suzanne Hart Family. said...

Okay so I am trying to put a few scrapbook-looking flowers on the top of my blog page. I uploaded the images to photobucket and I've tried inserting them into my blog by going to the Header section like you said to. But this is what mine looks like

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

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

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

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}


SO where exactly do I put the URL text into and how can I put several of the same image in a row along the top. Hope you can help. Thanks. zanny06@hotmail.com

nerdybirdy said...

hello. just to let you know, the exact size can be determined by you in the code. default is 660px wide (see following code) but it can easily be manipulated- even the height.


behold,

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
height:277px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background-image:url(http://yoursite.com/image.jpg)
}

xo

Annika said...

Great, thanks to this I managed to get my header on my new crochet blog!

Z said...

thanks! This was the only understandable explanation I could find, so you're a lifesaver.

J.C. Carley said...

Thank you! i was able to get my image up there but the Title and description are also still showing. How do I get rid of that so only my image shows?

Right now they look like two layers. Thanks!

J.C.

PaperPeople group said...

thank you :))

Dinesh said...

its not working for me can you please tell how can i proceed. i have minima lefty. and i tried pasting the code different places it doesnt work for me whats wrong

please tell

up close anal teen girls said...

back, Ukrainian Girls Ukrainian Ukrainian Ukrainian girl. Girl I can you teen anal videos

Cassidy Elizabeth said...

i got the picture in the header but the header is not changing size to fit the picture so it is coming up all squished....could you help?

daves said...

Thanks For posting . Its Really nice . Keep update a more article.
Application migration

cialis said...

Hello, I do not agree with the previous commentator - not so simple

xanax online said...

Thanks mate... just dropped by. Will look for BIKE STN when we get to Seattle. Still in Buenos Airies.

viagra uk said...

hey buddy,this is one of the best posts that I�ve ever seen; you may include some more ideas in the same theme. I�m still waiting for some interesting thoughts from your side in your next post.

viagra samples said...

That is very good comment you shared.Thank you so much that for you shared those things with us.Im wishing you to carry on with ur achivments.All the best.