Tutorial: How to make a custom designed background that can change colors easily.

I don't know if any of you run into this with your clients, but occasionally I will get a client that wants the flexibility to change the color of their background, but they don't want the background to be a plain color.  I thought that I would share my little trick to make this work.  I hope you can use it in your designs :)

Step #1:  Make or use a background or a seamless pattern for your background.  The key is that you need to take your background and make it white, with a transparent background.  I made this simple dot pattern in Adobe Illustrator (it works the same in Photoshop if you choose to use that). 

Step #2:  Then I made the dots white with no background (it is very important that there is no background).  After I made the dots white, I changed the opacity of the dots to 40%, you don't need to necessarily use 40%, just whatever you like, depending on how much contrast you want.

Step #3:  Save the background or pattern for web as a PNG with transparency selected, as shown below.

Step #4:  Upload you background image to Photobucket, or whatever hosting site you use and go into your Edit HTML page.  Add your background image, but do not delete the line that says: background:$bgcolor;

Step #5:  Go to the template designer and change the color :)   Now your client, or you can change the color with ease!

Hope this helps!