How to add a background to your blog

As part of a currently ongoing redesign I'm doing of my blog I've been working in a test blog, but I am also making some changes in my blog here.

I've added a new background to my blog, replacing the plain background I used to have. Now it may not seem amazingly different or remarkable but, as part of the overall new design, it should look just right in the end.

I think it's important to remember that it's a background and so is meant to be subtle and not draw attention away from the main point of any blog, which should be the content; what you write and the images you include.

For this simple background change I’ve used the system Blogger has in place. And yes, this is another how-to for Blogger. If you’re using Wordpress then check this tutorial out, and for Typepad look here. For other platforms, do some googling, read through a few tutorials, and always back up your template before doing anything.

Here's how I started.

Finding a background image

After working through a design for how I want my blog to look, I did some hunting for a suitable background image online. Yes, it is possible to make your own image, but the resources available on the web are incredible, and it’s fun and inspiring to look through them. Of course, I found lots of images I loved but I managed to be good and stick to my original plan...

Blogger itself offers images to use as backgrounds so if you don’t feel confident enough to download images from the net then you can still change the way your blog looks - see note 3 below for more information .

You can use an image that spans the width of your blog (or rather, the screen size it’s displayed on) but do bear in mind that such a large file will will slow down the time your blog takes to load. If you use a lot of photos/images on your blog anyway, it might be wiser to chose a small image file that is repeated - this tiling of images is commonly used to allow a seamless background without a large file size. It makes everyone happy.

The website Subtle Patterns is a wonderful resource, has over 300 images available, and is a real goldmine for blog backgrounds. They’re all free to use, although the site does like credit given, which is fair enough. This is where I found the image I’m using at present. Browse around until something catches your eye and then preview it to see what it looks like full screen. Do bear in mind the colour and design of your own blog may make it look different when in situ.

Here's what I did, after downloading my image of choice.

Changing the background image

1. First, I backed up my template. Just in case... Then, in the Blogger dashboard, I went to Template, and clicked on Customize.

2. I clicked on Background, and then on the little downward pointing arrow set to the side of the Background image box.

3. A pop-up then opened with a whole host of blogger backgrounds on offer - you can use one of these if you'd prefer; just click on it, click Done, then Apply to Blog and that's it, it's your new background.

I had the image I'd downloaded from Subtle Patterns already saved on my computer so I clicked on Upload image.

4. I browsed to where I’d saved the image to on your computer. Make sure you save it somewhere that’s simple to find, like your desktop - you can move it later. I then clicked on Done and the image uploaded.

5. Check how the image looks on both the miniature in the screen preview shown under the Background image heading, and further down the page, where a mock up of your blog is shown, with your new background.

The Alignment button doesn’t matter too much if your image is abstract and a small one. If it has a right way up, then make sure it’s displaying that way, and adjust the alignment if you need to by clicking on the tiny downward arrow next to the word.

My image was a small one that I wanted repeated/tiled so I chose Tile to ensure it tiled across and down the entire background of my blog.

I’ve kept Scroll with page checked as I find background images that remain static while the content moves can be a little distracting, but feel free to uncheck the box or to experiment and see what you prefer. Scroll with page means the background will move as the page scrolls down.


It's as simple as that. Click on Apply to Blog if you’re happy, and check your blog out to see the finished effect.




I experimented a little with some other background images to see how much changing it can affect how a blog looks.

The green background image, below, was one I found on the wonderfully named Squidfingers site -

The purple background image shown here, below, was created by me at BGPatterns, which is a clever site allowing you to adjust colours, symbols and transparency, amongst other variables -

Both these backgrounds are small images that take very little time to download from the net, and are used tiled.

As I say, I wanted something pretty neutral in both colour and pattern, but it’s still fascinating to see how different images can alter what a blog looks like, and the perception of what it’s about. So do experiment, but do back things up so you know you can always go back if you need to!

More Info - 

Sites for backgrounds used in this tutorial - 

Subtle Patterns

Squid Fingers

BG Patterns


Also, do some googling for backgrounds, and check out Pinterest too.

And if you’re feeling adventurous, you can also check out this tutorial about how to change the colour or transparency of images found at subtle, to personalise them and make them suit your blog even more.

Blogger's own brief tutorial about backgrounds.

Let me know if this has been any help, or you have any queries and I'll do my best to help. And do leave a comments if you follow the tutorial - I'd love to see your revamped blog!