Wednesday, August 19, 2009

Tutorial: How to Make Your Own Blog Background and Other Stuff

This is a popular tutorial people are trying to figure out these days. Now, first off, I want to mention that if you want a fancy one, there is a GREAT tutorial over at The Cutest Blog on the Block that I really like. Click here to see it!

Now if you are like me, and like to keep the background simple, yet eye catching, this is my tutorial on how to do that.

First off, you need a few things. Don't worry it can all be free. You need a simple background pattern that you like. Me, I like stripes and dots. But you can use plain colors or flowers. Try to find something with a pattern that repeats -- it just makes life easier for those of us who are blog-design-retarded. You can find free backgrounds at Scrapbook Flair -- my favorite. Or other sites that have backgrounds or digital scrapbooking pages you can use as a background.

Next you need to be a member of an online image host like photobucket. Membership is free.

Okay here we go!

1. Make sure that your template in is in the minima format -- if you did the 3 column tutorial you are ok. Minima is the most basic and easiest to work with. This tutorial assumes that is what you have. And as always make sure you backup your blog template in the HTML editor.

2. When working with backgrounds you will almost always be working in this section of the HTML editor. (Go to "Layout" then "Edit HTML):

body {
background:#ffffff;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

See where it says "background:#ffffff" ? That is where it tells you what color the background is; #ffffff is white.

3. Upload your choice of background to photobucket or wherever your photo host is. I like to load it as the biggest file posible.

4. Copy the direct link it gives you.

5. Next you will need to do this in the editor:

body {
background:#ffffff url(http://yourdirectlink.com/your-imageurl.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Add that line and it will put on your background! However, there may be a few things you will want to change and add now.

How to Fix Your Background

For instance. You will notice that your background scrolls with your words. If you want it to be fixed you need to add this line:

body {
background:#ffffff url(http://yourdirectlink.com/your-imageurl.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed
}

Now, you will notice that your background will repeat itself. To stop this, add this line:

body {
background:#ffffff url(http://yourdirectlink.com/your-imageurl.jpg) no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed
}

A few more background tips for you:

How to Make a Background Image Repeat Vertically Down a Page


Add this line:

body {
background: #ffffff url(http://www.imagehost.com/yourimage.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


How to Make a Background Image Repeat Horizontally Down a Page

body {
background: #ffffff url(http://www.imagehost.com/yourimage.jpg) repeat-x;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Positioning the Background Image

background: #ffff00 url(http://imagehost.com/yourimage.jpg) positioning-variables-here no-repeat;

Positioning Variables are:
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
So say you want your background to be centered top and center, it would look like this:

background: #ffffff url(http://imagehost.com/yourimage.jpg) no-repeat top center;


So, say you wanted your background to look like I have it on here. This is what my code looks like:

body {
background:#ffffff url(http://i586.photobucket.com/albums/ss308/nutsinanutshell/sf_ourhouse_bg_06.jpg); no-repeat center center;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed;
}

Any Questions??

6 comments:

Dawn Farias said...

Good tutorial. This is the first tutorial I've seen explain the centering codes. "You rock!"

camilla said...

Thank you, thank you, thank you. You do such an awesome job of explaining things WELL! These are the best online tutorials that I have found.

Sarah Denley said...

I know this is an old post, but hopefully you'll still see my question. I followed your directions and it looks great except that the background doesn't fill up the entire screen. I set it as I MB on photobucket. Is there a way to get it to take up the whole screen without having to upgrade my Photobucket account? thanks so much; yours was the most helpful tutorial I've read!

Mama Nut said...

Sarah, this is a tough question! It took me a long time to figure it out, when I first started doing backgrounds. First off, you have to realize that everyone's monitor is different. I have a larger one 1600 x 900 pixels, so when I make a background I make it to those specs, even though it may show up different on someone else's screen. Check you monitor size, you can find your settings in the control panel, appearance and screen resolution. Then when you design your background make it to that size.

That's the way I do it, I have searched and searched for a "stretch" code, but no one is sharing. If I ever do figure it out, I will for sure share!

Sarah Denley said...

Thanks for the tip! I use Paint.Net and when I tried to expand the size of the "canvas" it just made it smaller when I uploaded it into Photobucket. I'm so confused but I'm THIS close to having it right. Thanks so much for your help!

Mama Nut said...

I'm not very familiar with paint.net. But it sounds to me like you are saving it in a high res and photobucket can only support so much for each picture. When you are saving your background, try to turn down the resolution to a lower setting (preferable under 1 Megabyte) that will load it on in the size you want it.

Blog Widget by LinkWithin