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.