:: How to Add a Background Pattern :: Tip #6

Adding a background pattern to your blog can be done in just a  few easy steps.

1.  Find a pattern
2.  Upload it
3.  Add it to your blog's HTML

---

1.  Find a pattern.  Patterns can be any size, but smaller works best so your page doesn't take too long to load. Keep in mind that it will repeat across your background, so it must be seamless (ie, when the pattern repeats, it will look continuous).  Patterns can be found anywhere online, on your computer, or you could make your own.  A site that I really like is Pattern Coolor.  It's essentially a pattern generator, and the colors and sizes can all be personalized and downloaded. Now that you've found a pattern, save it on your computer.
 
2.  Upload it to an image hosting site (like Picasa or Flickr).  Then you want to remember the photo's url address.  Here's my current pattern so you can see what it will look like.

3.  Edit HTML Next you want to edit your blog's HTML by going to Layout>Edit HTML.  Find where it says this:

body {<br /> background:$bgcolor;<br /> margin:0;<br /> color:$textcolor;<br /> font:x-small Georgia Serif;<br /> font-size/* */:/**/small;<br /> font-size: /**/small;<br /> text-align: center;<br /> }

Now replace all the above with this following code. 

body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; color: $textColor; background: $bodybgColor url(YOUR PHOTO'S URL) repeat top left; font-family: arial, verdada, helvetica, tahoma, Sans-serif; font-size: 100%; width: 100%; }

4.  Replace   Don't forget to replace your photo's url wthere is says YOUR PHOTO'S URL - keep the parenthesis.  Now hit preview and make sure it shows your background pattern. 

Hope this works!  Have fun and feel free to link back to my blog.  :)  Let me know if you have any problems with this too - I would be glad to help.  

xoxo
nealy

**updated post**

If the above directions aren't working for you, sdouble check that your image you uploaded starts with "http" and ends in either .jpg or .png.

Here are some alternate instructions you can also try.  Find the body section and paste url(YOUR PHOTO'S URL) where it's shown below.

body{background:$bgcolor url(YOUR PHOTOS URL); margin: 0; color: $textcolor; font... } }

Good luck!