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!

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-wcIvuHLujkpx2Bh4wYUmnyn8wpivcJ57keLD1OSaWnY88mo8a9_qa5uPfeFY0RZHdKlJFEuODHbD8yyeEwtvYod5-VaOZb-Wf38wz1QbvQkAEJSG2D89myOcHLUlHvmKfV1mcsunBxC/s1600-h/website-info.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 80px; height: 15px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-wcIvuHLujkpx2Bh4wYUmnyn8wpivcJ57keLD1OSaWnY88mo8a9_qa5uPfeFY0RZHdKlJFEuODHbD8yyeEwtvYod5-VaOZb-Wf38wz1QbvQkAEJSG2D89myOcHLUlHvmKfV1mcsunBxC/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