EASY DIY Custom Blog Design Part 2: Background ~ Log-Tutorial

This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.

You can find cute Free Blog Backgrounds all over the Net.

But I am thinking more custom than that, so I am going to show you how to make a Custom Seamless pattern to use for a background at Colourlovers.com I love this website! Below is the Pattern that I colored, and that I am going to use for my example. **If you want to use a digital scrapbook paper instead of making one, I have a tutorial here.

So first, you need to set up a Free account.

Then you click on Create and Pattern.

Now you can choose to Design A Pattern:

or Color a Pattern:

I chose to Color A Pattern and it turned out like this:

Now, Name your pattern and Click Create Pattern:

Sometimes it will ask you to name colors, and it really doesn't matter what you name them (it doesn't always ask):

Then it will take you to your pattern, and you need to save it by clicking on the 1600x1200.

Now you need to go to your photobucket account and upload it, but before you upload (if you didn't already do this from Part 1), make sure that you select your "Customize your upload options" and then select Best Possible Quality (1mb file size). If you skip this step, you file will be smaller and won't look right.

In the meantime, make a new window or tab on your browser (leave your photobucket up), and go to your blog and your Edit HTML page.

Paste this code:

background:url(YOUR DIRECT LINK CODE HERE) ;

background-attachment:fixed;

In the place of the the line that says background:$bgcolor; where I have shown below:

Where it says: YOUR DIRECT LINK CODE HERE go back to your Photobucket account and you need to click on your image, and copy your "Direct Link Code" and paste it in place of YOUR DIRECT LINK CODE HERE

The direct link code can be found in 2 places in photobucket, it will look like one of the images below.

Now click on PREVIEW on your Edit HTML page, and it should look something like this.

Now that is IMPOSSIBLE to read, so I am going to put white behind my posts and sidebar. So I am going back to my Edit HTML page, and am going to scroll down to my #outer-wrapper { and paste this: background: white; Just like shown below. **If you want it a different color, you can use a color picker and put the hex code (example: #000000) Here is a link to a Color Picker.