Apr 22, 2010

:: 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:

Now replace all the above with this following code. 

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.  


**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.

Good luck!


The Chidisters said...

Hey Nealy. You must have read my mind (or saw my screw-ups on my blog lately.) I have been wanting and trying to change my background but when I follow your directions nothing happens. It just stays the same. I uploaded an image from the site you suggested on to Picasa web albums and then copied the url into the code you gave and replaced it in the html but nothing changed. Not sure if you have any suggestions. I know other background images I have seen end in .png. Didn't know if somehow I needed to get it to that format. Anyway, let me know if you have any ideas, if not, no big deal. Thanks!

b+k said...

Hey Nealy, thanks so much for the post! I've been following your blog for a little while - I found it through Steph's, and I've really appreciated your series! I always feel a little awkward introducing myself to someone who I don't know but whose blog I follow, but I thought it was about time :) I've enjoyed everything about your blog, from your photography and recipes to the remodels and tutorials! Oh, and your pics of MN of course! (I'm originally from Bloomington) I'm linking your page to my page to give you credit for your design help, and I wanted to check if I could use your 10 Ways to Beautify Your Blog image as the link?

Sarah said...

Hi Nealy!

Thank you for sharing all your fabulous ideas. I need them! I'm having the same problem as The Chidisters. I upload it to Picasa, copy the url, stick it in the code, and nothing changes! :( I hope you can help! Thanks!

Bambina Babe said...

Hi guys, so sorry for the trouble. I think I had made a little mistake in the code. I've fixed it now, so it should work. :) Let me know if you're still having trouble.

b+k said...

Hi Nealy,

Thanks for the comment! I'm just getting started in this blog world... And, yes, I did go to ISU, and C-Stone and Salt too. We actually have several random connections - I was in Freshman Group with Kiley (when Matt was leading), Kyle led Salt that year, and I know Annie too. And, do you go to Woodcrest? I saw that in an old post... I spent my whole life (pre-college) at Wooddale (which planted Woodcrest back in the day)
Personally, I love random connections like that!
Take care!

The Chidisters said...

Hey Nealy - Me again. I have finally figured out how to get my background image to show up but I am having trouble figuring out how to keep the middle portion white. The background image is covering my entire page. Also, I am wanting to have the background pattern show a little at the top too so the white doesn't go all the way to the top of the page - any thoughts? I really appreciate your feedback. I have only ever used premade backgrounds and am still trying to figure this whole thing out. Have a good day!

Lindsay said...

EEEK! I used this tutorial and it didn't work for me at all (even using the updates in the edit). Since I did not save my original HTML code, I deleted my entire blog :( Would you be able to assist me in fixing this by providing the proper complete HTML code for this? Thank you, please help! ;)

Post a Comment


Blog Template by BloggerCandy.com