127 Free Blogger Backgrounds and Textures to Spice up Your Site January 10, 2011 /

Background images can instantly transform the appearance of our Blogger sites. Using the Blogger template designer, we can easily upload and configure a new background image in just a few clicks, while those using older templates need only add a few lines of code to achieve a dramatic effect.

In this post, you'll find resources for hundreds of different free backgrounds, patterns and textures you can use to spice up your Blogger site, along with instructions for applying this simple but extensive effect.

Large background images

Large background images enable us to display a single large image behind the main content of our site, such as a photograph or complementary texture.

Here is a selection of excellent resources for large background images and textures:

HOT Bliggity Blog

Provides a huge selection of large background images with a contrasting central panel to offer contrast for the main site content.

Shabby Blogs

A beautiful collection of "shabby chic" background images (also find free buttons, banners and other website decorations).

The Cutest Blog on the Block

Offers a huge selection of backgrounds for all design preferences.

Dotty Dot Dot

Hundreds of large background images (includes full sized previews):

Jelly Pages

Dozens of colourful backgrounds organized by category and style:

Blogger Blog Backgrounds

A small selection of beautiful illustrated backgrounds:

CG Textures

A huge selection of large photographs and textures organized by category.

Texture Warehouse

A massive gallery of high quality textures, licensed under a Creative Commons License (Attribution-NonCommercial-ShareAlike 2.0).

Every Stock Photo

A fabulous image search tool for locating free licensed high quality images. Use the search function to find the type of image you require.

Alice Graphixx

Dozens of pages of high quality textures and HQ photos.

Repeating patterns and textures

Seamless patterns and textures can be used to fill the entire background area of our design. Here are some of the best resources for finding patterns for your own blogger designs:

Koller Media

Offers a wide selection of colour and pattern styles.

Shizoo Design

A vast, gorgeous selection of background patterns (with a few large textures thrown into the mix).

Din Pattern

Provides an excellent selection of quality tile patterns for free use in our designs:

Squidfingers

One of my old favourites, Squidfingers offers pages of pattern backgrounds to choose from.

K10k

Almost 1000 free pixel-patterns for use as tiled background images:

milleseicentopercento

A simple, single-page layout offering a small but beautiful selection of background images.

BgPatterns

Create your own perfect tile pattern using this free web-based tool.

Patterns of Change

A quirky gallery of tile background patterns by Liza Phoenix:

Colour Lovers

One of the largest collections of user-generated background patterns. You can also design your own!

BG-Repeat

Provides a large selection of repeating patterns and textures:

How to add a background image to your Blogspot blog

The method used to apply a background image depends on whether you use the Blogger template designer or the older Layouts templates.

Here are both methods you can use, with variations depending on whether your background is large or repeating.

How to apply a large background image using the Blogger template designer

If you are using the Blogger template designer, you can upload and apply a background image in just a few clicks:

Go to Design>Template Designer in your Blogger dashboard and select Background from the menu on the left.

Click the background image tile which brings up a menu enabling us to select a background image from the default selection. At the top of the left-hand menu, choose Upload Image and select the image you would like to use from a location on your computer:

Click Done to save your selection and go back to the background menu.

Using the drop-down menus, choose to set your preferred alignment for this background image.

Top center alignment is the general preference for both large background images and repeating tile patterns.

You can also choose whether or not to repeat the background image. Generally speaking, large images look odd when they are repeated unless they have been designed to tile seamlessly. When using a repeating pattern, choose the option to Tile which ensures the image repeats both vertically and horizontally.

If there is space around the outside of your large background image, go to Advanced>Page in the Blogger template designer menu, and select a complementary background colour using the menu on the right:

Once you're happy with the changes, click Apply to blog to save the edits and enjoy the new design for your site.

To add a background image by editing your Blogger template

If you use the older Blogger Layouts template or prefer to edit the HTML to add your background image, here is what you should do:

Upload your background image to an image hosting site. I prefer to upload images to Picasa as explained in this previous post (opens in a new window). Don't forget to copy the URL of your hosted image to your clipboard!

Next, go to Design>Edit HTML in your Blogger dashboard and locate the following line of code:

</b:skin>

Immediately before this line, paste one of the following code snippets, replacing YOUR-IMAGE-URL.png with the location of your own image.

If using a large background image:

body {
background-image: YOUR-IMAGE-URL.png;
background-position: center top;
background-repeat: no-repeat;
}

This prevents the image from repeating either vertically or horizontally. Use background-repeat: repeat-y if you'd like the image to repeat vertically.

If using a repeating pattern:

body {
background-image: YOUR-IMAGE-URL.png;
background-position: center top;
background-repeat: repeat;
}

This code ensures the background pattern tile repeats both horizontally and vertically across the whole page.


Preview your template to ensure your image appears the way you prefer and then save your changes.

Have I missed any useful background resources?

I hope you have found this post a useful resource for finding and using background images in your designs. If you know of any useful collections I haven't included, please feel free to share in the comments section below.