Skip to main content

CSS Background Image

The CSS Background image is quite popular for Blogger users. There is a website dedicated to providing them as you might know. It is a successful website (I’m jealous!).

But if you want to put your own background image onto your Blogger blog it is easy to do and it will be all yours and of your making, which I think is better for you (achievement) and the visitors (more personal and unique, which is very important on the internet).

Blogger code is css code (cascading style sheets). Css code is code that dictates the look and feel of the whole website (usually) although it can be used to affect a single page (i.e. the code is on the page in question as opposed to on a separate sheet and then referred to).

This short post tells you how to put a background image into a Blogger blog. First prepare the image. I carelessly use a large rather “heavy” (large file size) image for a background that I use on my YouTube Home Page for example. I also use it for one or two pages of the main website but my main site is not written in css but straight Html.

By default the background image is placed in the top left corner of the page and then repeated vertically and horizontally. Small images will therefore create a kind of wallpaper effect and are generally recommended but a dramatic large image that fits the page well can look outstanding. Some of the best background images are ones that are formulated to knit together seamlessly. Perhaps the best website for this is: DINPATTERN . The patterns are extremely slick and elegant but a bit gothic and flock wallpaper like. Bottom line; try and produce your own image. A large image on a black background can work well but this is about taste!

background-image-blogger

These are the steps to take to add a css background image to your Blogger blog:

  1. Get to the Edit HTML page of your blog. You can do that from Dashboard>Layout>Edit HTML tab
  2. Make sure that you have an up to date downloaded copy of the template on your computer and if not simply click on “Download Full Template” at the top of the page. The small file that is downloaded (XML file) can be uploaded to renew the altered template if it all goes pear shaped. But if you review your work at each stage this shouldn’t be necessary.
  3. Press Ctrl F and a search box comes up bottom left of the screen.
  4. Copy this code (in red) into the search box: body { . It will find the code automatically and quickly painted in green.
  5. Just below this line of code place the code highlighted in red below (over write what is already there which should be background:$bgcolor;). This is how it will look (note: the image URL in the example is not a real image URL but the code is correct. Just replace the URL with your own. Make sure all the code is in place.

body {
background-image:URL(http://www.pictures-of-cats.org/images/Maine-Coon-white.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

With the above code the image scrolls up and down with the website. I prefer it when the background stays still and the blog moves over it; it can look nice. This is the modified code to achieve a static background:

body {
background-image: url(http://www.pictures-of-cats.org/images/Maine-Coon-white.jpg); background-attachment: fixed; background-position: center;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

You can see how this looks on this site: 3 Stray Cats

How do you know what the URL of the image is to put into the block of css code? Well, you will need to upload an image of your own making to a server. It might be a server that hosts your other website (this is the case for me). If Blogger is your only website, you can upload your background image to various free servers:

  1. Google Picasa Web Albums (as a Google member/subscriber you can open an account easily). This is my preference.
  2. Photobucket
  3. There are numerous image hosting sites
  4. I see no reason why you can’t use Blogspot, the host for your Blogger blog. You can upload the image in the usual way in compose mode as if you are creating a new post and then go into Edit Html mode and dissect out the URL of the image. I explain this further below:

This is an example of the Blogger image code as uploaded:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_LlfXWxcpJyU/SiNlECsiGiI/AAAAAAAAL5k/hgs9dyFnl0Q/s1600-h/website-info.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 80px; height: 15px;" src="http://4.bp.blogspot.com/_LlfXWxcpJyU/SiNlECsiGiI/AAAAAAAAL5k/hgs9dyFnl0Q/s320/website-info.png" alt="" id="BLOGGER_PHOTO_ID_5342224703109077538" border="0" /></a>

It looks complicated because the image is linked to a page on which just the image is seen so the URL is mentioned twice. I have highlighted in red the URL of the image. Do this for your own image and then copy and paste it into the css background image code mentioned above.

Preview your work before saving and viewing the website. That is it…..

From css background image to Home Page

Comments

Popular posts from this blog

Cat Ear Mites

Brown gunge. Yes, I know this is a ferret! It does show the build up of dark brown to black ear wax caused by the presence of the cat ear mites in the outer ear canal. This parasite is not restricted to the domestic cat, which makes this photo valid and a useful illustration (I was unable to find a suitable photo of a cat with the condition). Photo Stacy Lynn Baum under a creative commons license. Ear mites (minute crab like creatures) are one of the causes of inflammation of the outer ear canal (scientific term for this inflammation is Otitis externa ). The outer ear canal is the tube that runs from outside to the ear drum (the pathway for the reception of sound), which can be seen when looking at the ear. Otitis externa affects humans and often swimmers as it is called "swimmer's ear" in humans. This YouTube video show ear mites under a microscope. They are not actually in the ear in this video. There are many possible causes of Otitis externa in c

Feline Mange

I'll write about three types of feline mange (a) feline scabies or head mange (b) demodectic mange and (c) sarcoptic mange. The source material is from Cat Owner's Home Veterinary Handbook - the best on the market . Generalised feline mange? Puerto Rico - Photo by Gotham City Lost And Found Feline Scabies - head mange Head mange or feline scabies, is a fairly rare condition in cats, which is caused by the Notoedres mite (head mite) that only reproduces on cats. The female mites burrow a few millimeters (that is a lot) into the skin around the head, and neck to lay eggs, which hatch and lay their own eggs. Their presence and activities causes intense itching that in turn causes the cat to scratch. The scratching will obviously be noticed and it will cause the skin to become red, scratched and worse infected. Symptoms: hair loss and scabs, thick wrinkled skin and grey/yellow crusts form plus the symptoms of scratching. Feline mange (head mange) is contagious and tr

Cat Anatomy

Cat Anatomy - Photo by Curious Expeditions . The picture above was taken at Wax Anatomical Models at La Specola in Florence, Italy. The photograph is published under a creative commons license kindly granted by the photographer. I am sorry if it is a bit gruesome. It is pretty well all I could find as an illustration that was licensed for publication. Cat Anatomy is a very wide ranging subject. The anatomy of a cat is very similar to human anatomy. If you were writing a biology book for students of biology you would go through every part of the a cat's anatomy in some detail. It would be similar to writing a book about the human anatomy. It would be a thick book and pretty boring for your average internet surfer. So, how do you limit such a big subject and make this post meaningful? The answer I think lies in doing two things: Having a quick general look at cat anatomy - an overview and; Focusing on the areas of cat anatomy that are particular to the cat and of parti