12.29.2010

EASY! How to Create a Seamless Custom Blog Background at COLOURlovers.com

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. 

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 Preview(it is located on the right sidebar, it looks like this).

Then do a Right-Click and Save Image As.


Now you need to go to your photobucket account and upload it, but before you upload, make sure that you select your "Customize your upload options" and then select Best Possible Quality (1mb file size).  If you skip this step, your file will be smaller and won't look right.
Now there you have a Cute Custom Background!!


To install using the MINIMA Template, follow these directions (if you are using the new 2010 Templates, scroll down for instructions)

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) ;

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.


Now you blog should look something like this!



To install using the New 2010 Templates, follow these directions:

Make a new window or tab on your browser (leave your photobucket up), and go to your blog and your Template Designer page.

I chose "Picture Window" as my template, but you can play with different templates.

Click on Advanced and Add CSS.

Add the following code in the white box:

body {
background:url(YOUR DIRECT LINK CODE HERE) ;
}

There you go!

7 comments:

  1. I have tried and tried and can't get my background to stick using the new blogger template. Sigh. ~Kelly

    ReplyDelete
  2. It won't work if you copy and paste exactly what she has there, I just tried it too and it didn't work. There is an a space between the last ) and ; that doesn't belong. Get rid of that space and it should work! It worked for me when I deleted the space! Hope that helps!

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. thanks!!!!! very2 helpful tutorial

    ReplyDelete
  5. I do not evеn knoω how I ended uр here, but I thought this post was great.I dοn't know who you are but certainly you are going to a famous blogger if you aren't already ;) Chееrѕ!
    Also see my website :: Remove Background

    ReplyDelete

Related Posts with Thumbnails