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.
Here is a selection of excellent resources for large background images and textures:
A vast, gorgeous selection of background patterns (with a few large textures thrown into the mix).
One of the largest collections of user-generated background patterns. You can also design your own!
Provides a large selection of repeating patterns and textures:
Here are both methods you can use, with variations depending on whether your background is large or repeating.
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.
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:
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:
If using a repeating pattern:
Preview your template to ensure your image appears the way you prefer and then save your changes.
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 {This prevents the image from repeating either vertically or horizontally. Use background-repeat: repeat-y if you'd like the image to repeat vertically.
background-image: YOUR-IMAGE-URL.png;
background-position: center top;
background-repeat: no-repeat;
}
If using a repeating pattern:
body {This code ensures the background pattern tile repeats both horizontally and vertically across the whole page.
background-image: YOUR-IMAGE-URL.png;
background-position: center top;
background-repeat: repeat;
}
Preview your template to ensure your image appears the way you prefer and then save your changes.
Komentar
Posting Komentar