Christine's Blog Templates
Instructions For Using Templates and Customization Tutorials
These pages include instructions for applying the template to your blog, and tutorials and tips for customizing the template to make it more personal and individual. My templates are written to maximize Blogger's Fonts, Colors, and Page Elements features, giving you a lot of customization potential. Also included are some articles which are just helpful information. Please look around, and enjoy personalizing your blog :)If you find my work helpful, you can show your appreciation by linking to this website and/or making a small donation. Thanks.
Adding Background Images To Your Blog
Tips
Keep your background image file size as small as possible so it will load quickly.I don't recommend using the covers-the-entire-page variety of background images. For one thing, they take a long time to download, slowing your page's loading time considerably. For another thing, it's difficult to make them look nice on a blog layout, it may require a lot of rewriting of the layout to fit the background image.
Using a small background tile shouldn't slow page loading time in a noticeable way at all, and can make a nice change to the look of your blog.
Using a single background image, well placed, if it's not too large, should also be ok.
These sites have some background tiles I like:
Squidfingers | Citrus Moon
To make your blog colors coordinate with an image, read more about colors, and try the freeware program I recommend.
You should always assign a coordinating background color to your page. It will display before any images load, and will look bad if it clashes with your design. If you assign no color at all, a color will be chosen from the viewer's computer settings, so the color you see will not necessarily be the color everyone else sees.
Adding Background
- The first thing you will have to do, after you create or find an image you want to use, is upload it somewhere online where they allow deep linking. I use Photobucket, and there are other free image hosts. Or you may have some web space with your ISP account you can use. It doesn't matter where you upload them, as long as they allow deep linking.
- Open your template file in Notepad to make your modifications.
- Near the top of the page you will see something like
body {
margin:0px;
padding:0px;
background:$pagebg;
font:$bodyfont;
} - Change the line that begins with "background", to include the image url, as shown below. If it is a tile background (like on this page), that's all you have to do. Copy the code below and paste into your template, inserting your correct image url, and changing nothing else.
body {
margin:0px;
padding:0px;
background:$pagebg url(http://url-to-your-image-here.jpg);
font:$bodyfont;
} -
If you don't want the background to repeat, you have to add a line telling it not to repeat, as shown below. To specify exactly where a no-repeat image should show up, add a line for background position. This will specify the position of the top left corner of the image. The first number is pixels from the left, the second number is pixels from the top. Replace the "100" with your number, leave everything else in place.
body {
margin:0px;
padding:0px;
background:$pagebg url(http://url-to-your-image-here.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
font:$bodyfont;
} - You'll have to put the template on your blog or test blog to see the changes (Applying Your Template). Don't forget to refresh your browser (read Clearing Your Cache if you're not seeing the changes). When you have it the way you like it, keep a backup copy somewhere safe.
- All content on this website is © 2006 - 2007 Christine S. |
RSS feed