Langsung ke konten utama

Free Blogger Backgrounds And Textures To Spice Up Your Site

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 sajian on the left.

Click the background image tile which brings up a sajian 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 sajian 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.

Komentar

Postingan populer dari blog ini

Another Blog Is Already Hosted At This Address - How To Fix

When attempting to set up their Blogger custom domain, many Blogger users have received the following error message: Another blog is already hosted at this domain Although I have set up many custom domains to use with Blogger , until this weekend I had never experienced this issue for myself (and was unable to offer any definitive solution for those experiencing this problem). My friend was experiencing this very persoalan after setting up her new blog a few days ago. We have been able to find some solutions which I hope may help others who see this error message when attempting to set up their custom domain. Assuming you have already configured the DNS settings for your particular domain provider and have attempted to publish to a custom domain through your Blogger dashboard, here are the steps you should take: 1. Publish back to your Blog*Spot domain In order to make your blog accessible while troubleshooting your custom domain, it is advisable to publish back to your Blog*Spot...

Google Blogger For Dummies To Be Released In February!

If you're familiar with the "Dummies" series of books, you'll understand how helpful and insightful these textbooks can be in dealing with any subject. That being said, I'm happy to announce that Google Blogger for Dummies is due to hit bookshops on February 3rd. It's available to pre-order now from Amazon.com  (priced at $16.49) and will be available in Barnes and Noble, Waterstones and other bookshops, and also directly from Wiley. The author, Susan Gunelius, has been kind enough to send me a 60 page preview of this book, complete with a full and detailed table of contents and two sample chapters for my preliminary review. Also, when the book is released early next month, Susan has graciously offered me a copy of the book so that I can review it in it's entirety and offer readers my insights. What Google Blogger for Dummies will cover Being a "Dummies" guide, Google Blogger for Dummies will cover both the basics of using Blogger (crea...

16 Useful Twitter Tools For Blogger

Since it's launch back in 2006, Twitter has become a leading pioneer in the world of social media. Bloggers in particular find this service an invaluable tool for syndication, news stories and community conversation. For this post, I have rounded up 16 of the most useful tools, tips and free resources to help you get the most out of Twitter through your Blogger powered blog. Display your Latest Tweets Visitors to your blog may also enjoy reading your Tweets, particularly if they are of relevance to your blog's niche subject. Here is a selection of the best tools for displaying Twitter updates in your Blogger layout: The Official Twitter Badges Twitter provides an animated "Profile" badge which you can use to display your latest updates as a widget in your blog layout: You can configure the size, colours and number of updates for your badge in the settings, then grab the code which can be pasted in an HTML/JavaScript widget in your Blogger layout page. Ano...